Html button display inline

CSS Buttons

Use the background-color property to change the background color of a button:

Example

Button Sizes

Use the font-size property to change the font size of a button:

Example

Use the padding property to change the padding of a button:

10px 24px 12px 28px 14px 40px 32px 16px 16px

Example

.button1
.button2
.button3
.button4
.button5

Rounded Buttons

Use the border-radius property to add rounded corners to a button:

Example

Colored Button Borders

Use the border property to add a colored border to a button:

Example

Hoverable Buttons

Use the :hover selector to change the style of a button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the «hover» effect:

Example

.button <
transition-duration: 0.4s;
>

.button:hover background-color: #4CAF50; /* Green */
color: white;
>
.

Shadow Buttons

Use the box-shadow property to add shadows to a button:

Example

.button1 <
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
>

.button2:hover box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
>

Disabled Buttons

Use the opacity property to add transparency to a button (creates a «disabled» look).

Tip: You can also add the cursor property with a value of «not-allowed», which will display a «no parking sign» when you mouse over the button:

Example

Button Width

By default, the size of the button is determined by its text content (as wide as its content). Use the width property to change the width of a button:

Example

Button Groups

Remove margins and add float:left to each button to create a button group:

Example

Bordered Button Group

Use the border property to create a bordered button group:

Example

Vertical Button Group

Use display:block instead of float:left to group the buttons below each other, instead of side by side:

Example

Button on Image

Button

Animated Buttons

Example

Example

Add a «pressed» effect on click:

Example

Example

Add a «ripple» effect on click:

Источник

inline-block: простое решение для сложных задач

В статье рассмотрены особенности работы свойства display со значением inline-block. Также приводится несколько практических примеров с применением данного свойства и решением ряда типичных проблем верстки.

Что это такое и как оно работает?

Свойство display определяет, как должен вести себя элемент на странице по отношению к остальным, а именно как он расположится. Существует, в принципе, 2 основных типа представления элемента на странице: блочный и строчный. Блочный элемент занимает все свободное место строки и перекидывает следующий элемент на новую. Строчные элементы располагаются в одну строку.

По отдельности эти формы представления блоков выполняют свои определенные задачи, однако в симбиозе могут охватывать достаточно широкий спектр задач. Именно поэтому был создан альтернативный вариант, который одновременно элементу присваивает функции блочного и строчного элементов — display со значением inline-block.

Блок внутри строчного элемента

Чтобы было понятнее типологию этого типа задач, представим, что нам надо вставить кнопку внутрь текста. То есть у нас будет массив какого-то текста, а где-то в определенном месте будет стоять кнопка с определенным задним фоном. Примерно это может выглядеть так

Как же это реализовать кодом? В этом нет ничего сложного, код довольно прост и в нем легко сориентироваться

div class="block0"> Lorem ipsum dolor sit amet, consectetuer span class="button">adipiscing elitspan>. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis sociis span class="button">montesspan>, nascetur ridiculus mus. Donec quam felis, ultricies nec, span class="button">pellentesquespan> eu, pretium quis, sem. div>

.block0 /*обвертка текстового блока*/  display:block; width:300px; margin:30px auto 0px auto; position:relative; text-align:center; > .button /*код кнопки*/  display:inline-block; background:#679bce; text-align:center; color:#fff; padding:3px 7px; border-radius:3px; height:23px; cursor: pointer; >

Устанавливаем элемент по центру, не зная ширины

Может возникнуть задача, когда необходимо блок или кнопку установить по центру контейнера. В этом случае нам снова может прийти на помощь комбинация блочных и строчных свойств.

К примеру, у нас имеется картинка, а снизу от нее будет расположена кнопка, при нажатии на какую можно будет оставлять комментарий. Эта кнопка должна располагаться по центру блока. Для этого нашей кнопке прописываем display: inline-block;. А родительскому тегу необходимо задать выравнивание текста по центру. Код этого решение будет выглядеть следующим образом:

div class="block0"> img width="250" src="img.jpg" title="Пример" alt="Картинка"> div class="button">Комментироватьdiv> div>

.block0  display:block; width:250px; margin:30px auto 0px auto; position:relative; padding:15px; background:#eee; text-align:center;/*центрирует нашу кнопку*/ > .button  display:inline-block; // display: inline; /* для IE6-7, которым неведом inline-block */ background:#679bce; text-align:center; color:#fff; padding:3px 7px; border-radius:3px; height:23px; cursor: pointer; margin-top:9px; >

В браузере это будет выглядеть так:

Выравниваем элементы списка с разной высотой

Довольно часто встречается ситуация, когда элементы списка имеют разную высоту. Если не внести дополнительных правок, картина получается не из лучших. Так как считается хорошим тоном дизайна сайта, когда у всех элементов одинаковые или пропорциональные отступы, а также все элементы выровнены под один уровень.

Для решения этой проблемы отлично подойдет свойство float, однако есть одно маленькое «но». Такое решение справедливо, если установлена фиксированная высота. Для универсальности будем рассматривать резиновые блоки, которые будут выравниваться при любой высоте и любом количестве текста.

Вторым решением, которое обойдет проблему высоты могут стать строки таблицы. Применение таблицы будет не рационально и отразит негативный эффект с точки зрения семантики. Можно конечно имитировать строки или ячейки таблицы через CSS, однако этому будет сопутствовать множество проблем.

Наиболее просто и действенный способ — опять обратиться к возможностям inline-block. Запишем следующий код:

ul> li>img width="150" src="img2.png" title="Пример1" alt="Картинка1"> Картинка 1li> li>img width="150" src="img2.png" title="Пример2" alt="Картинка2"> Картинка 2li> … ul>

.ul  display:block; width:330px; margin:30px auto 0px auto; position:relative; padding:5px; background:#eee; text-align:center;/*центрирует нашу кнопку*/ > li  display:inline-block; // display: inline; /* для IE6-7, которым неведом inline-block */ vertical-align:top; text-align:center; margin:5px 5px; width:150px; > img  display:block; width:150px; >

А вот так будет выглядеть наш практический пример в браузере

Кроме того, при использовании inline-block в комплексе с line-height можно заставить работать свойство vertical-align, которое предназначено для работы в текстовом блоке или в ячейках таблицы.

В каких браузерах работает?

Источник

Как отобразить элемент на странице. Свойство display

Свойство display определяет тип отображения элемента, как он будет отображаться на веб-странице: как блок, строчный элемент или каким-то другим способом.

Значения свойства display

Теперь разберём на примерах значения свойства display .

block — элемент отображается как блок и занимает всю доступную ширину. Новый блок начинается с новой строки. Примером элемента, который имеет значение display: block , может быть div .

 
Заголовок блока
 
Текст внутри блока
 
 

inline — элемент отображается как строчный элемент и не создаёт новый блок. Элемент занимает столько места, сколько ему нужно для отображения содержимого. Примером элемента, который имеет значение display: inline , может быть span .

Этот текст выделенный текст и еще немного текста
 

Этот текст выделенный текст и еще немного текста

inline-block — элемент отображается как строчный элемент, но его содержимое может быть отформатировано как блок. Элемент занимает столько места, сколько ему нужно для отображения содержимого, но может иметь ширину и высоту. Примером элемента, который имеет значение display: inline-block , может быть button .

Этот текст находится на той же строке, что и
 
этот текст
 

none — элемент не отображается на веб-странице и его содержимое не занимает места. Это может быть полезно для скрытия элементов на странице или для создания анимаций. Примером элемента, который имеет значение display: none , может быть script .

Пример использования свойства display с разными значениями.

Этот блочный элемент занимает всю ширину.
 Этот строчный элемент занимает только столько места, сколько ему нужно. Этот элемент имеет значение inline-block, поэтому его содержимое может быть отформатировано как блок и иметь ширину и высоту. 
Этот элемент имеет значение none, поэтому он не отображается на веб-странице.
 

.block-example < display: block; background-color: yellow; >.inline-example < display: inline; background-color: pink; >.inline-block-example < display: inline-block; background-color: lightblue; width: 200px; height: 50px; >.hidden-element

Блочный элемент имеет жёлтый фон, строчный элемент — розовый фон, элемент button — голубой фон и имеет ширину и высоту, а скрытый элемент не отображается на странице.

Наследуется ли свойство display

Свойство display является не наследуемым, что означает, что тип отображения элемента не будет наследоваться его потомками. Тип отображения элемента должен быть указан явно для каждого элемента на странице.

Например, если родительский элемент имеет свойство display: block; , а его дочерний элемент не имеет заданного свойства display , то тип отображения дочернего элемента будет определён по умолчанию, который может отличаться в зависимости от типа элемента.

Однако, если вы зададите свойство display для дочернего элемента, то оно переопределит наследованное значение и будет применяться только к этому элементу.

 
Это абзац, наследующий свойства родительского элемента
 
Это абзац с явно заданным типом отображения
 
 
 

Здесь родительский элемент имеет свойство display: block; , но дочерний элемент .child имеет свойство display: inline; . Поэтому абзац, находящийся в дочернем элементе, будет отображаться как инлайновый элемент, несмотря на то, что родительский элемент имеет тип отображения блочного элемента.

Нюансы использования

Как и любое CSS-свойство, display имеет нюансы и особенности, которые важно учитывать при создании веб-страниц.

• display определяет, как элемент будет взаимодействовать с другими элементами на странице. Например, элементы с типом block занимают всю доступную ширину и начинаются с новой строки, что может повлиять на позиционирование других элементов на странице.
• Некоторые элементы имеют собственные значения по умолчанию для свойства display . Например, div имеет значение по умолчанию display: block , а span имеет значение display: inline . Поэтому, если вы хотите изменить значение display для этих элементов, необходимо указать это в CSS.
• При использовании значения display: inline-block нужно учитывать, что между элементами может появиться небольшой пробел, который вызван пробелом в HTML-коде. Этот нюанс можно устранить разными способами, например, удалением пробелов в коде или применением стилей, которые устраняют эффект.

⭐ Поддержка браузерами свойства display

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник