Как сделать — группу кнопок
Сгруппировать серию кнопок в одну строку в группе кнопок:
Создание группы кнопок
Шаг 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 кнопки учебник, чтобы узнать больше о том, как стиль кнопок.
Как сделать — Группу вертикальных кнопок
Узнать, как создать вертикальную «группу кнопок» с помощью CSS.
Группа вертикальных кнопок
Группа ряд кнопок в вертикальной группе кнопок:
Создать группу вертикальных кнопок
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
.btn-group button <
background-color: #4CAF50; /* Зеленый фон */
border: 1px solid green; /* Зеленая граница */
color: white; /* White text */
padding: 10px 24px; /* Немного отступов */
cursor: pointer; /* Указатель/значок руки */
width: 50%; /* Установите ширину, если это необходимо */
display: block; /* Сделайте так, чтобы кнопки располагались друг под другом */
>
.btn-group button:not(:last-child) <
border-bottom: none; /* Предотвращение двойных границ */
>
/* Добавить цвет фона при наведении курсора */
.btn-group button:hover <
background-color: #3e8e41;
>
Совет: Зайдите на наш учебник CSS Кнопки, чтобы узнать больше о том, как стилизовать кнопки.
html кнопки в ряд
Можно использовать display: inline-block для элементов.
Пример расположения элементов в одну строку:
display — многоцелевое свойство, которое определяет, как элемент должен быть показан в документе. Значение inline-block — генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу.
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 7.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Вывести маркированный список в одну строку и убрать отображение маркеров.
Решение
Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору LI следует добавить стилевое свойство display со значением inline , оно преобразует блочный элемент в строчный (пример 1).
Пример 1. Горизонтальный список
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Горизонтальный список
Из-за того, что вокруг списка автоматически добавляются отступы, их следует изменить, добавляя свойства margin и padding к селектору UL , как показано в примере.
Какие кнопки обычно встречаются на сайте? Я разделили бы их на два вида: кнопки внутри формы и кнопки-ссылки. И те и другие необходимо уметь верстать.
Кнопки внутри формы
Тег input
Вставляются тегом input, c типом submit – что означает кнопку для отправки формы.
Тег button
Вставляет на сайт кликабельную кнопку, работающую, в любом месте сайта.
Тег button по сравнению с input, располагает большими возможностями, внутри него можно вставлять любой контент (текст, изображения).
Но не надо забывать, что если при нажатии кнопки, должны отправиться данные на сервер, то теги input и button, следует поместить внутри тега form.
Теги input и button могут обрабатываться скриптом, например при событии клика.
Пример верстки кнопок внутри формы
Button
Input
Кнопки-ссылки
Практически на каждом сайте встречаются ссылки в виде тега a, но оформленные с помощью CSS, как кнопки. Чаще всего такие кнопки-ссылки, используются как элементы навигации на сайте: пункты меню, переход на следующую страницу, в рекламном блоке. Вот такие дизайнерские кнопочки не имеет смысла вставлять тегом button, лучше сразу вставлять тегом a с каким-нибудь классом или ID. Поскольку эта кнопка будет куда-то все равно ссылаться.
Пример верстки кнопки ссылки #1
Тег a по умолчанию является строчным элементом, если не задать ему display: inline-block, то к нему не применятся отступы, рамки и другие стили.
Скриншот
Пример верстки кнопки ссылки #2
Скриншот
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.