Как сделать — группу кнопок
Сгруппировать серию кнопок в одну строку в группе кнопок:
Создание группы кнопок
Шаг 1) добавить HTML:
Пример
Шаг 2) добавить CSS:
Пример
.btn-group button <
background-color: #4CAF50; /* Green background */
border: 1px solid green; /* Green border */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left; /* Float the buttons side by side */
>
.btn-group button:not(:last-child) <
border-right: none; /* Prevent double borders */
>
/* Clear floats (clearfix hack) */
.btn-group:after <
content: "";
clear: both;
display: table;
>
/* Add a background color on hover */
.btn-group button:hover <
background-color: #3e8e41;
>
Группа кнопок «обоснованная/полная ширина»:
Пример
Совет: Перейдите на наш CSS кнопки учебник, чтобы узнать больше о том, как стиль кнопок.
Три кнопки всегда одинаковой ширины
И дизайнер очень сильно хочет, чтобы кнопочки тянулись и всегда были всегда одинакового размера и когда мы сжимаем окно браузера до того, что одной кнопке больше некуда уменьшаться – все кнопки перестают уменьшаться. Вроде выглядит несложно, но давайте разберемся в подводных камнях:
Первое, что приходит на ум: три div’а шириной 33% и float: left. Но, к сожалению, эти три div’а всегда будут шириной 33%, и если текст в них не будет влазить то в лучшем случае он обрежется, а в худшем будет как-то так:
Дальше кажется что на помощь придут таблицы, но три ячейки шириной 33% также не дают нужного эффекта – каждая схлапывается до размеров своего содержимого. И даже table-layout: fixed не помогает.
В какой-то момент мне показалось что реализовать такое невозможно. Но задачка загружена в мозг и он перебирает все возможные варианты. Итак:
Суть трюка очень простая, нужно немножко уйти от конечного результата и на секунду представить наши кнопки вот так:
Допустим для кнопок мы имеем такой код:
<div /><div /><div />
Давайте обернем все это таблицей и зададим каждой .button ширину 100%:
<table>
<tr>
<td>
<div /> <div /> <div /> </td>
</tr>
</table>
И, внезано, мы уже получили поведение, которое нам нужно, только для вертикально расположенных элементов. Внимательный читатель спросит: а зачем здесь таблица? А затем, что только таблица умеет останавливать свое уменьшение, при упирании в контент. Таким образом таблица всегда будет ширины максимальной .button, а width: 100% заставит остальные в случае упирания остановить свой рост.
Теперь нам нужно сделать из вертикальных кнопок горизонтальные. Тут всё просто 🙂 Добавим в каждый .button ещё один элемент и пронумеруем button’ы. Получим такой код:
<table style="width: 33%">
<tr>
<td>
<div /> <div /> </div>
<div button_2">
<div /> </div>
<div button_3">
<div /> </div>
</td>
</tr>
</table>
Теперь обманем браузер и скажем .button
.button-i
<
position: relative;
>
.button_3 .button-i
<
left: 200%;
>
И получаем нужное нам поведение.
Блудный сын
Как всегда в IE6 все будет совсем не так, как в других браузерах. В нем мы увидим лесенку, и все потому, что IE6 не применит нулевую высоту к .button. Это известная проблема, она связана с тем, что IE6 не умеет делать блок по высоте меньше, чем заданный в нем же размер font-size. Обычно эту проблему обходят задавая font: 0/0 a; Но в нашем случае этим методом воспользоваться нельзя, так как нам нужно вполне конкретное значение font-size.
Но, как говорится, и на старуху бывает проруха, IE6 можно в данном случае тоже обмануть с помощью двух свойств: float: left; margin-bottom: -100% . Говоря терминами Сереги Чикуенка (я впервые у него вычитал подобный термин) мы подавляем влияние блока на высоту контейнера. Таким образом мы получаем нужное нам поведение и в IE6.
Кстати, интересно то, что я когда столкнулся с этой проблемой и решив её, я переписал полностью решение на float и margin-bottom, ведь и другие браузеры понимают это. Но внезапно проблемы возникли в 7-м ИЕ, который вел себя точно также как 6-й без хаков в предыдущем решении. Пришлось вернуться к первому решению и хачить под ИЕ6.
Ограничения
Понятно что у этого метода есть ограничение в виде фиксированной высоты кнопок, но, по-моему, реализовывать обратное и не нужно, и не возможно. Хотя, возможно, я ошибаюсь =)
Как разместить элементы списка горизонтально или горизонтальное меню с помощью CSS
Приветствую Вас, уважаемые читатели блога webcodius! Обязательным элементом практически любого сайта является меню. Поэтому если Ваш сайт имеет больше одной страницы, то без навигационного меню скорей всего не обойтись. Ведь без меню пользователю будет трудно найти нужные ему странички.
Так как любое меню представляет из себя список ссылок, которые ведут на внутренние страницы сайта. Для создания меню обычно используют маркированные списки, которые создаются с помощью html тегов <ul> и <li> . Но как известно элементы списка по умолчанию выстраиваются вертикально друг под другом, а что если необходимо сделать горизонтальное меню? С использованием CSS это не является большой проблемой.
Для начала создадим обычный маркированный список, содержащий пункты нашего меню:
Для того чтобы идентифицировать список и задать для него нужные css стили, я добавил к нему атрибут id с идентификатором «menu» .
По умолчанию без каких-либо правил CSS он будет выглядеть следующим образом:
Как видно элементы списка выстроились вертикально друг под другом и если нам нужно вертикальное меню, то если стилизовать нужным образом ссылки (добавить фоновый цвет, рамки, отступы, изменить шрифт) можно получить привлекательную навигационную панель.
Если же требуется получить горизонтальное меню, то просто необходимо расположить элементы списка по горизонтали. Для этого к селектору LI следует добавить стилевое свойство display со значением inline или inline-block . Я буду использовать правило display:inline-block . Итак, для того, чтобы элементы списка выстроились по горизонтали просто добавляем код CSS:
<style>
ul#menu li <
display:inline-block; /* расположить пункты горизонтально */
>
</style>
Теперь элементы списка будут расположены по горизонтали:
Как видим пункты меню выстроились в один горизонтальный ряд. Но пока на меню похоже не очень. Теперь, чтобы получить полноценную навигационную панель, оформим меню с помощью css стилей. Для начала добавим фон для панели, растянем ссылки на весь пункт <code>li</code>, уберем подчеркивание ссылок, настроим отступы и др.:
<style>
#menu, #menu li <
margin: 0; /* убрать внутренние отступы */
padding: 0; /* убрать внешние отступы */
>
#menu <
background: #03658e; /* цвет фона навигационной панели */
>
#menu li <
display:inline-block; /* расположить пункты горизонтально */
text-align: center; /* текст горизонтально по центру */
>
#menu a <
display: block; /* ссылка растягивается на весь пункт li */
padding: 5px 15px; /* задаем внутренние отступы */
color: #fff; /* цвет текста */
text-decoration: none; /* убрать нижнее подчёркивание у ссылок */
>
#menu a:hover <
background: #8AB8CC; /* фон пунктов при наведении */
>
</style>
В итоге получится такое привлекательное меню:
Вообще внешний вид меню далее зависит только от вашей фантазии и знания свойств css. Далее для примера приведу несколько вариантов оформления меню.
Горизонтальное меню по центру
Выравнять меню по центру можно так:
<style>
#menu, #menu li <
margin: 0;
padding: 0;
>
#menu <
text-align: center; /* пункты и текст горизонтально по центру */
background: #03658e;
>
#menu li <
display:inline-block;
text-align: center;
>
#menu a <
display: block;
padding: 5px 15px;
color: #fff;
font-size:150%;
text-decoration: none;
>
#menu a:hover <
background: #8AB8CC;
>
</style>
<style>
#menu, #menu li <
margin: 0;
padding: 0;
>
#menu <
max-width: 550px; /* ограничение длины панели */
margin: 0 auto; /* навигационная панель по центру страницы */
text-align: center;
background: #03658e;
>
#menu li <
display:inline-block;
text-align: center;
>
#menu a <
display: block;
padding: 5px 15px;
color: #fff;
font-size:150%;
text-decoration: none;
>
#menu a:hover <
background: #8AB8CC;
>
</style>
Горизонтальное меню с пунктами одинаковой ширины
Чтобы сделать все пункты меню одинакового размера указываем для них нужный размер. Только главное чтобы в сумме размеры пунктов не превышали размер всей панели. Можно сделать так:
<style>
#menu, #menu li <
margin: 0;
padding: 0;
>
#menu <
text-align: center;
background: #03658e;
>
#menu li <
display:inline-block;
text-align: center;
width: 20%; /* задаем размер пункта можно в пикселях*/
>
#menu a <
display: block;
padding: 5px 15px;
color: #fff;
font-size:150%;
text-decoration: none;
>
#menu a:hover <
background: #8AB8CC;
>
</style>
<style>
#menu, #menu li <
margin: 0;
padding: 0;
>
#menu <
text-align: center;
>
#menu li <
display:inline-block;
text-align: center;
width: 20%; /* задаем размер пункта можно в пикселях*/
>
#menu a <
display: block;
padding: 5px 15px;
color: #fff;
font-size:150%;
text-decoration: none;
background: #03658e;
margin-right: 5px; /* добавляем отступы между пунктами */
>
#menu a:hover <
background: #8AB8CC;
>
</style>
Если добавить немного трансформации:
<style>
#menu, #menu li <
margin: 0;
padding: 0;
>
#menu <
text-align: center;
>
#menu li <
display:inline-block;
text-align: center;
width: 20%;
-webkit-transform: skewX (-45deg); /* Трансформация Для Safari и Chrome */
-moz-transform: skewX (-45deg); /* Трансформация Для Firefox */
-o-transform: skewX (-45deg); /* Трансформация Для Opera */
-ms-transform: skewX (-45deg); /* Трансформация Для IE */
transform: skewX (-45deg); /* Трансформация CSS3 */
background: #03658e;
>
#menu li a <
display: block;
padding: 5px 15px;
color: #fff;
font-size:150%;
text-decoration: none;
margin-left : 5px;
-webkit-transform: skewX (45deg); /* Трансформация Для Safari и Chrome */
-moz-transform: skewX (45deg); /* Трансформация Для Firefox */
-o-transform: skewX (45deg); /* Трансформация Для Opera */
-ms-transform: skewX (45deg); /* Трансформация Для IE */
transform: skewX (45deg); /* Трансформация CSS3 */
>
#menu a:hover <
-webkit-transform: skewX (45deg); /* Трансформация Для Safari и Chrome */
-moz-transform: skewX (45deg); /* Трансформация Для Firefox */
-o-transform: skewX (45deg); /* Трансформация Для Opera */
-ms-transform: skewX (45deg); /* Трансформация Для IE */
transform: skewX (45deg); /* Трансформация CSS3 */
>
#menu li:hover <
background: #8AB8CC;
-webkit-transform: skewX (-45deg); /* Трансформация Для Safari и Chrome */
-moz-transform: skewX (-45deg); /* Трансформация Для Firefox */
-o-transform: skewX (-45deg); /* Трансформация Для Opera */
-ms-transform: skewX (-45deg); /* Трансформация Для IE */
transform: skewX (-45deg); /* Трансформация CSS3 */
>
</style>
то получим меню со скошенными углами:
На этом все, пробуйте и предлагайте свои варианты в комментариях. Ссылка на исходный файл с примерами. До новых встреч!
Размещение двух кнопок в одной строке в HTML
Поскольку вы можете видеть, что кнопки входа и регистрации находятся на отдельных строках. Я хочу, чтобы они были на одной линии.
Я поместил код кнопки регистра в том же элементе абзаца, что и вход. Он появился на той же строке, но, если я нажму регистрацию, прошу заполнить имя пользователя и пароль. Как это исправить?
Просто перестройте следующим образом и добавьте тип к вашей кнопке:
Обычно, если вы добавляете button внутри формы, она принимает ее как кнопку отправки, чтобы вызвать отправку формы. Поэтому вам нужно указать его как type=»button» .
Реальная проблема заключается в том, что кнопка внутри вашей ссылки перехватывает события кликов. Вот почему это не работает, когда вы ставите вторую кнопку в качестве брата для первого.
Чтобы исправить это, я предлагаю вам удалить кнопку из ссылки, нарисуйте ссылку, чтобы она выглядела как кнопка, и переместите ее обратно в тот же абзац, что и кнопка «Вход», причем обе кнопки имеют display: inline-block .