Почему не работает inline ru
Перейти к содержимому

Почему не работает inline ru

  • автор:

Р ешение inline-block

Одним из самых интересных свойств в CSS является inline-block . Возможность создавать блоки, ведущие себя как строчные элементы потенциально несёт очень много радости. С одной стороны, можно управлять такими блоками при помощи text-align , с другой — внедрять в текст, используя или как иконки, или как отдельные смысловые элементы, вместе с остальным текстом переносящиеся со строчки на строчку и обтекаемые флоатами.

Однако, существуют две причины, по которой вёрстка с использованием подобных блоков почти не получила распространения:

  1. display:inline-block в IE срабатывает только для изначально строчных элементов, вроде A , SPAN и прочих. При этом возможности обойти это, насколько мне известно, нет — век живи, век учись — если сначала у блока, пускай и блочного, стоит display:inline-block , а позже только для IE мы пропишем display:inline всё волшебным образом заработает.
  2. display:inline-block никак не работает в Firefox версий ниже 3-ей. Однако, есть один обходной путь.

Тогда, как Fx2 простой inline-block не понимает, существует проприетарное лисье свойство display:-moz-inline-box . К сожалению, это не полноценное решение проблемы, а костыль, имеющий множество ограничений по использованию, но на безрыбье и оно сгодится, если использовать его аккуратно.

Под аккуратностью я понимаю следующие моменты:

  • Для минимизации глюков поведения -moz-inline-box желательно внутрь такого элемента вставить дополнительный строковый элемент с display:block . Однако, в этом случае необходимо добавить float:left для IE, иначе он будет растягивать такой элемент на всю возможную (для безграничных возможностей ие) ширину.
  • Если нужно задавать фиксированные размеры для элемента inline-block , лучше задавать его и для самого элемента, и для внутреннего элемента (во избежание некоторых проблем).
  • Поведение -moz-inline-box местами непредсказуемое, поэтому во время разработки нужно чаще тестировать поведение таких элементов в Fx2, однако внутренние элементы уже будут обретать привычные черты.
  • Т.к. в Fx3 нормальное поведение inline-block уже реализовано, подключать решение нужно примерно так: display:-moz-inline-box; display:inline-block; , вторая лиса увидит только свою проприетарщину, а третья — заметит и стандартное значение, которое и применит.
  • К сожалению, применяя к подобным элементам vertical-align , очень сложно добиться одинакового выравнивания во всех браузерах.

P.S.: Следует упомянуть, что существует элемент, который практически во всех браузерах ведет себя как inline-block элемент почти безукоризненно. Это тег button . Правда, минусов у реализации inline-block при помощи кнопок предостаточно: много различных стилей, которые прийдется обнулять, невозможность кроссбраузерно и легко сделать простую ссылку на кнопочной основе, ну и изначальная семантика кнопки, из-за которой возможность её применения будет возникать очень редко.

Почему не работает inline-block?

Добрый вечер! Во время верстки учебного макета, повторяя за автором верстку у меня блоки с изображениями и текстом не встали в горизонтальное положение. Хотя inline-block указал им явно. У автора видео все сработало. В чем хитрость? все перерыл уже( 6283d2823f195829160205.jpeg 6283d28a736b5451952288.jpeg 6283d2917732a582314336.jpeg

  • Вопрос задан более года назад
  • 120 просмотров

6 комментариев

Простой 6 комментариев

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS

6283d99f6121d217583158.png

Не нужно выкладывать код картинками.
Для вставки кода в редакторе есть специальная кнопка

Front-Den @Front-Den Автор вопроса

      WordPress   
WordPress Интенсив

Создать свой сайт на WordPress

это просто!

Куда сложнее сделать это правильно!

Ежедневно в России появляется более 5 000 новых сайтов.
И только единицы из них становятся популярными и приносят ощутимую прибыль. В чем секрет? В чем формула успеха? Узнайте на предстоящем двудневном бесплатном интенсиве!
узнать больше об интенсиве
down

Что вас ждет в нашем интенсиве?

2 Полноценных обучающих вебинара, где:
1
Всего за 2 вебинара мы научим вас, как создать свой сайт на WordPress.
2
Покажем, как правильно оптимизировать сайт и сделать его привлекательным для поисковых систем. Только свежая, профессиональная и актуальная информация.
3
Вы узнаете, что такое "хорошая индексация", "высокая посещаемость", "стабильный прирост посетителей", "ТОП по запросам" и, что намного важнее, как добиться всех этих показателей!
* < box-sizing: border-box; margin: 0; padding: 0; >.container < width: 1140px; margin: 0 auto; >.promo < height: 800px; background: url('../img/bg/main_bg.jpg') center center/cover no-repeat; padding: 39px 0 62px 0; >.logo .logo_img < display: block; margin: 0 auto; >.logo .logo_text < color: white; font-family: Roboto; font-size: 15px; font-weight: 500; line-height: 24px; text-transform: uppercase; text-align: center; margin-top: 14px; >h1 < margin-top: 53px; >.title < color: #f9bf3b; font-family: "Roboto-black"; font-size: 41px; font-weight: 400; line-height: 24px; text-transform: uppercase; text-align: center; >h2.title < margin-top: 30px; >.simple .title_big < color: #fff; font-family: "Roboto-black"; font-size: 80px; font-weight: 400; text-transform: uppercase; text-align: center; margin-top: 21px; >.promo .promo_text < padding: 0 13px; margin-top: 23px; color: #fff; font-size: 21px; font-weight: 300; line-height: 28px; font-family: "Roboto Light"; font-weight: 300; text-align: center; >.promo .promo_text span < color: #f9bf3b; font-family: "Roboto - Bold"; font-weight: 700; text-transform: uppercase; >.promo .promo_btn < display: block; margin: 0 auto; margin-top: 73px; width: 313px; height: 72px; box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.18); border: 4px solid rgba(0, 0, 0, 0.23); background-image: linear-gradient(to top, #2789b9 0%, #3ab6da 100%); color: #fff; font-family: "Roboto Condenced"; font-size: 17px; font-weight: 400; line-height: 24px; text-transform: uppercase; cursor: pointer; outline: none; >.more < margin-top: 73px; >.more .more_text < color: #fff; font-family: "Roboto - Thin"; font-size: 15px; font-weight: 400; text-transform: uppercase; text-align: center; >.more .more_img < display: block; margin: 0 auto; margin-top: 13px; >.waiting < height: 604px; background-color: #efefef; padding: 85px 0 75px 0; >.waiting .waiting_header < color: #252525; font-family: Roboto; font-size: 30px; font-weight: 400; line-height: 12px; text-transform: uppercase; text-align: center; >.waiting .waiting_divider < width: 217px; height: 4px; background-color: #f9bf3b; margin: 0 auto; margin-top: 18px; >.waiting .waiting_subheader < margin-top: 17px; color: #4a4a4a; font-family: Roboto; font-size: 23px; font-weight: 400; text-align: center; >.waiting .waiting_wrapper < margin-top: 45px; >.waiting .waiting_wrapper .waiting_item

AntonLitvinenko

Антон Литвиненко @AntonLitvinenko

Почему display: inline не работает

Внутри вашего элемента ul с display: inline находятся блочные элементы li , которые «распирают» строчный элемент изнутри до состояния блока. Это как в целлофановый пакетик положить кирпич. Пакетик примет габариты кирпича как минимум.

Если вам нужно выстроить элементы в одну строку, то задайте элементам li display: inline , как вам в соседнем комментарии посоветовали.

А если вам нужно чтобы весь ul был строчным, а li внутри него так и остались столбиком, то нужно задавать элементу ul свойство display: inline-block .

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

Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.

Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.

Значение none

Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.

 
Невидимый div (
Я - невидим!
) Стоит внутри скобок

Значение block

  • Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float ).
  • Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.

Это значение display многие элементы имеют по умолчанию: , заголовок , параграф

.

 
Первый
Второй

Блоки прилегают друг к другу вплотную, если у них нет margin .

Значение inline

  • Элементы располагаются на той же строке, последовательно.
  • Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

Например, инлайновые элементы по умолчанию: , .

Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.

Если расположить элементы вплотную – его не будет:

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Например, три прямоугольника подряд:

 
. Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля .

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

 
Инлайн
Блок
Инлайн

Значение inline-block

Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.

Как и инлайн-элемент:

  • Располагается в строке.
  • Размер устанавливается по содержимому.

Во всём остальном – это блок, то есть:

  • Элемент всегда прямоугольный.
  • Работают свойства width/height .

Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .

Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.

 

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

Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

table < display: table >tr < display: table-row >thead < display: table-header-group >tbody < display: table-row-group >tfoot < display: table-footer-group >col < display: table-column >colgroup < display: table-column-group >td, th < display: table-cell >caption

Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.

Вертикальное центрирование с table-cell

Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.

Это можно использовать для центрирования:

 div 
Элемент
С неизвестной
Высотой

CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.

При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .

Значения list-item, run-in и flex

У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:

Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:

Пункт 1

Если после run-in идёт block , то run-in становится его первым инлайн-элементом, то есть отображается в начале block .

Если ваш браузер поддерживает это значение, то в примере ниже h3 , благодаря display:run-in , окажется визуально внутри div :

Про пчёл.

Пчёлы - отличные создания, они делают мёд.

Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in .

Вот, для примера, правильный вариант отображения run-in , оформленный другим кодом:

 

Про пчёл.

Пчёлы - отличные создания, они делают мёд.

Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in . На момент написания этой статьи только IE поддерживал display:run-in .

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *