Как сделать кнопки на одном уровне?
https://jsbin.com/deqecileke/3/edit?html,css,output
Дополнительно:
https://habr.com/ru/articles/329820/
или аналогично гридами
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="wrap"> <div class="item"> <p>1</p> <div class="content"> <p>title</p> <div class="btn-block"> <button>btn</button> </div> </div> </div> <div class="item"> <p>2</p> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quis aliquam hic corrupti eius sunt non quasi repellendus ducimus doloremque magni amet, molestiae error, porro facilis, similique modi eos! Cupiditate!</p> </div> <div class="btn-block"> <button>btn</button> </div> </div> </div> </body> </html> |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="wrap"> <div class="item"> <p>1</p> <div class="content"> <p>title</p> <div class="btn-block"> <button>btn</button> </div> </div> </div> <div class="item"> <p>2</p> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quis aliquam hic corrupti eius sunt non quasi repellendus ducimus doloremque magni amet, molestiae error, porro facilis, similique modi eos! Cupiditate!</p> </div> <div class="btn-block"> <button>btn</button> </div> </div> </div> </body> </html>
.wrap { display: flex; } .item { width: 50%; outline: 1px solid red; display: flex; flex-direction: column; } .content { flex-grow: 1; display: flex; flex-direction: column; } .item .btn-block { margin-top: auto; } |
.wrap { display: flex; } .item { width: 50%; outline: 1px solid red; display: flex; flex-direction: column; } .content { flex-grow: 1; display: flex; flex-direction: column; } .item .btn-block { margin-top: auto; }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы разместить кнопки на одном уровне, вам нужно использовать CSS для управления их расположением на странице. Вот несколько способов, которые вы можете использовать:
1. Использование свойства display: inline-block; для кнопок:
.button { display: inline-block; margin-right: 10px; /* добавляем отступ между кнопками */ }
2. Использование свойства float: left; для кнопок:
.button { float: left; margin-right: 10px; /* добавляем отступ между кнопками */ }
3. Использование flexbox для создания контейнера для кнопок и их выравнивания на одном уровне:
HTML:
<div class="button-container"> <button class="button">Button 1</button> <button class="button">Button 2</button> </div>
CSS:
.button-container { display: flex; } .button { margin-right: 10px; /* добавляем отступ между кнопками */ }
4. Использование таблицы для размещения кнопок на одном уровне:
HTML:
<table> <tr> <td><button class="button">Button 1</button></td> <td><button class="button">Button 2</button></td> </tr> </table>
CSS:
table { width: 100%; } td { padding: 5px; /* добавляем отступ вокруг кнопок */ }
Выберите подход, который лучше всего подходит для вашего дизайна и структуры страницы. Не забывайте также о стилизации кнопок с помощью CSS, чтобы они выглядели привлекательно и соответствовали общему стилю вашего сайта.