Р ешение inline-block
Одним из самых интересных свойств в CSS является inline-block . Возможность создавать блоки, ведущие себя как строчные элементы потенциально несёт очень много радости. С одной стороны, можно управлять такими блоками при помощи text-align , с другой — внедрять в текст, используя или как иконки, или как отдельные смысловые элементы, вместе с остальным текстом переносящиеся со строчки на строчку и обтекаемые флоатами.
Однако, существуют две причины, по которой вёрстка с использованием подобных блоков почти не получила распространения:
- display:inline-block в IE срабатывает только для изначально строчных элементов, вроде A , SPAN и прочих. При этом возможности обойти это, насколько мне известно, нет — век живи, век учись — если сначала у блока, пускай и блочного, стоит display:inline-block , а позже только для IE мы пропишем display:inline всё волшебным образом заработает.
- 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 при помощи кнопок предостаточно: много различных стилей, которые прийдется обнулять, невозможность кроссбраузерно и легко сделать простую ссылку на кнопочной основе, ну и изначальная семантика кнопки, из-за которой возможность её применения будет возникать очень редко.
Центрирование резинового блока по горизонтали
Представь типичный фрагмент сайта: фотография, а под ней ссылка с выравниванием по-центру:
Тут все просто. Самое долгое в верстке этого блока — вырезать фотографию. Давай немного усложним задачу: ссылка должна выглядеть как кнопочка (т.е. иметь фон). Например, такой:
Тоже легко? Контейнеру text-align: center, ссылке display: block, margin: 0 auto, фон и ширину… Стоп! А если ссылка-кнопка резиновая? Ширину-то задавать и нельзя! А без нее блочный элемент разъедется на все доступное пространство. Как же его подогнать под размер содержимого?
Как вариант задать float, например, left. Элемент останется блочным, а значит фоновый рисунок не пострадает, и сожмется до размеров содержимого. Решения найдено? Как бы не так! Теперь margin: 0 auto не работает и кнопка преспокойненько прилипла к левому краю!
Ну и дела! Похоже придется задавать margin-left в зависимости от ширины надписи…
Пробуем включить мозг. Итак:
- Чтобы присвоить фоновую картинку ссылке, ее нужно сделать блочной.
- Чтобы спозиционировать блочный элемент по центру экрана нужно задать ему ширину, иначе он растянется на всю ширину родительского элемента.
- Чтобы элемент не растягивался на всю ширину родителя для него обычно прописывают float: left, но тогда он будет выровнен по левому краю и ему нужно задать отступ слева. Но я не знаю, какой будет отступ слева, потому, что он зависит от ширины кнопки!
То есть я не могу сделать ссылку строчной, потому что у нее есть высокая фоновая картинка, и не могу выровнять резиновую блочную ссылку по центру. Ни display: inline, ни display: block в этом случае не подходят. Вот если бы было так, чтобы одновременно и по центру как display: inline и с картинкой, как display: block…
А ведь именно так и можно сделать! В спецификации CSS2 у свойства display специально на этот случай есть значение inline-block, которое превращает элемент в строчный блок.
Таким образом, решением данной задачи будет следующий код:
.parent < text-align: center; >.button < display: inline-block; color: #fff; position: relative; margin: 0 auto; line-height: 32px; padding: 0px 6px 0 10px; font-size: 12px; background: url(path-to/inline-block-button.png) no-repeat; text-decoration: none; cursor: pointer; >.button span < position: absolute; width: 5px; height: 32px; right: -4px; top: 0; background: url(path-to/inline-block-button-cup.png) no-repeat; >
Такой вариант подойдет для выравнивания любого строчного элемента. Для блочных это тоже работало бы, если бы не одно мелкомягкое НО. Да, ты конечно понял, какое. Я даже не удивился — display: inline-block неправильно работает с блоками в IE6 и даже IE7.
Тем не мение, как всегда, имеется способ побороть разработки Microsoft, к тому же их же оружием. А именно, используя Microsoft свойство hasLayout!
Для того, чтобы все заработало, придется сделать элемент строчным принудительно, задав display: inline, а уже потом присвоить ему layout. В данной ситуации сделать это можно, прописав zoom: 1.
Решение нашей задачи с блочным элементом в главной роли:
Комментировать
.parent < text-align: center; >.button < position: relative; margin: 0 auto; line-height: 32px; padding: 0px 6px 0 10px; font-size: 12px; background: url(path-to/inline-block-button.png) no-repeat; text-decoration: none; cursor: pointer; display: inline-block; //display: inline; zoom: 1; >.button span < position: absolute; width: 5px; height: 32px; right: -4px; top: 0; background: url(path-to/inline-block-button-cup.png) no-repeat; >
- IE 6-8
- Firefox 3.0
- Opera 9.5-10.5
- Safari 4
- Chrome 5
Не забудь, что свойство zoom невалидно. Поэтому в боевых условиях выноси его и хак для IE в отдельный CSS, подключаемый с помощью условных комментариев.
Заметка
Также display: inline-block не работает в Firefox 2 и его эмулируют используя вендорное значение display: -moz-inline-stack. Эта информация носит скорее ознакомительный характер, потому что процент пользователей Firefox 2 падает с каждым днем и, думаю, с ним не стоит заморачиваться.
Выводы
Резиновый строчный элемент с фоном можно выровнять по центру родителя просто присвоив родителю text-align: center, а элементу display: inline-block, который превратит элемент в строчный блок.
Резиновый блочный элемент для всех нормальных браузеров выравнивается точно так же. Для IE6-7 алгоритм такой:
- В правилах для IE6-7 сделать элемент строчным (display: inline).
- Установить этому элементу layout.
- CSS приемы
- «Дергание» сайта
- background position со смещением
- clearfix
- CSS прозрачность
- CSS хаки
- RGBA — CSS полупрозрачность
- Затемнение фона
- Кроссбраузерный
- Обнуление отступов
- Порядок описания ссылок
- Прелоад изображений
- Сброс стилей
- Сокращения в CSS
- Убираем рамку с эл-ов в фокусе
- Условные CSS
- Условные комментарии
- Поворот вокруг своей оси
- Поворот объекта вокруг свой
- Resize для textarea в Safari и Chrome
- Блочная верстка форм
- Кастомные checkbox и radio на CSS
- Кросбраузерные input и textarea
- Кроссбраузерный button
- Нестандартные checkbox
- Нестандартные radio
- Нестандартные select
- Нестандартные select multiple
- Нестандартные поля выбора файла
- Нестандартные текстовые поля
- О кроссбраузерности placeholder
- Отступы у checkbox и radio
- Оформление input type=search
- Резиновая кнопка
- Текст в поле type=»password»
- Блоки равной высоты в строке
- Колонки равной высоты
- Прижимаем подвал к низу
- Ресайз окна: потомок перерос родителя
- Сайт в центре экрана
- Фиксированная колонка + резиновая + clear:both
- CSS 3D лента
- CSS3 всплывающие подсказки
- IMG внутри блока — убираем странный отступ
- IMG: меняем рисунок при наведении
- Аккордеон на чистом CSS3
- Валидный target=»_blank»
- Верстка рейтингов
- Верстка содержания
- Вставка спецсимволов в генерируемый контент
- Вставка стрелок
- Индивидуальные стили для li. Избавляемся от классов.
- Масштабируемая картинка в резиновой колонке
- Многоколоночный текст на CSS3
- Нестандартное подчеркивание
- Отменяем обтекание текстом картинки
- Оформление внешних ссылок
- Оформление изображений по align
- Оформляем «ol»
- Правильные анонсы новостей
- Список определений. Требуем невозможного.
- Firefox
- -moz-box-shadow и -moz-border-radius — это кошмар CPU
- Позиционирование внутри button
- Ширина input type=file
- Onload в IE9
- z-index в IE6-7
- Баг с текстом при применении Alpha фильтра
- Масштабирование и PIE
- Отступы в кнопках в IE6-7
- Проблемы с em
- Эмуляция after и before для IE 6-7
- Эмуляция data:URL для IE6-7 — используем MHTML-включение
- hasLayout
- Max-width
- Min-height
- Min-width
- Min-width и max-width одновременно
- PNG и прозрачность
- Высота блока 1px
- Дублирование символов
- Дырка под футером
- Как перекрыть select
- Обрезка контента c отрицательным margin в IE6
- Отступы плавающих блоков
- Проблемы с размерами блоков
- Псевдокласс :first-child
- Псевдокласс hover в IE 6
- Селектор потомков >
- Селекторы атрибутов [type=…]
- Сестринский селектор
- Смещение на 1px
- Ссылки с вложением
- Устраняем flickering
- Эмуляция position:fixed
- overflow-y
- Не подгружаются шрифты @font-face
- Проблема с oveflow: hidden
- Скругление img
- HTML шаблон для мобильных устройств
- Выпадающее меню на CSS
- Выравнивание навигации из блоков по центру
- Выравнивание навигации по середине
- Резиновое меню
- Резиновое меню из блоков
- Убираем класс для первого элемента
- Box-sizing: переключаем блочную модель
- inline-block: простое свойство для непростых задач
- Вертикальная позиция для строчного элемента
- Вертикальное выравнивание
- Выравнивание по центру с position: absolute
- Вычисляемые отступы
- Два в одном: позиция + размеры
- Долой отступы между строчными элементами (и блоками)
- Обходим схлопывание margin
- Центрирование картинки в блоке
- Центрирование резинового блока по горизонтали
- Активация flash
- Вставка flash в HTML
- Вставляем ролик с YouTube
- Как отключить flash
- Как перекрыть flash
- Параметры для вставки объектов
- Ссылка на flash объекте
- CSS треугольники
- Аппаратное ускорение анимации
- Встраиваем изображения — data:URL
- Градиент: CSS3 против CSS2 + картинка
- Лесенка спрайтов — сложный случай поклейки
- На одну картинку меньше. Спецсимвол ×
- Необычные тени с CSS3 box-shadow
- Оптимизация Google Web Fonts
- Оптимизация фонов с помощью Canvas
- Проблемы с border-radius
- Псевдоэлемент before для маркера списка
- Скругление углов. Обзор методов.
- Сокращаем HTML5 код
- Спрайты: меньше картинок — больше скорость
- Тень для блока
- Фигуры с углами на CSS
- Шаблоны градиентов
- Дополнение Skype
- Подключить favicon
- Профилактика сайта: максимально простое оповещение
- Ссылки на skype
- @font-face в деталях
- Cufon — нестандартный шрифт средствами JS
- font-size: 100.01% для html
- Безопасные шрифтовые CSS стеки для англоязычных текстов
- Безопасные шрифтовые CSS стеки для рунета
- Безопасные шрифты
- Вертикальный текст
- Используем псевдоэлемент :first-letter
- Контур для текста
- Нестандарный шрифт. Быть ему или нет?
- Нестандартный шрифт средствами CSS
- Плавающий :first-letter
- Подмена текста изображением
- Соответствия шрифтов Windows, Mac и Unix/Linux
- Строчный :first-letter
- Текст под углом
- Текст с CSS градиентом
- Тень для текста
- Эффект отражения
Что делать, если не работает inline-block?
Результат:
Здесь я хотел, чтобы History, Culture и Language были в одну линию.
- Вопрос задан более двух лет назад
- 275 просмотров
1 комментарий
Простой 1 комментарий
Сергей delphinpro @delphinpro Куратор тега CSS
Не помещается. У вас body ограничен шириной 320пикс.
Решения вопроса 1
iBird Rose @iiiBird Куратор тега CSS
Пока ты спишь — твой конкурент совершенствуется
ты уже использовал flex для header. что тебе мешает использовать его и на навигацию?
header .mnu_top
Ответ написан более двух лет назад
Нравится 1 4 комментария
Samrux @Samrux Автор вопросаЭто, конечно, помогло поставить в ряд, но не подскажите ли ещё, что делать с линией, она должна быть до правого края.
iBird Rose @iiiBird Куратор тега CSS
Samrux, ну ты сам ограничил body стилем max-width: 320px;
Samrux @Samrux Автор вопроса
iBird Rose, Да, однако там 20px, а не 320.iBird Rose @iiiBird Куратор тега CSS
Samrux, убери этот стильbody
линия будет до правого края
Ответы на вопрос 1
Надо очистить всё у ul а не только list-style, надо убрать display block у li > a, для li display inline, а не inline-block.
Или вместо всех этих inline для li просто воспользоваться современными технологиями
.mnu_top
Или вот так, что будет надежнее для старых IOS
.mnu_top
И еще с body разобраться. Вы все это пытаетесь делать при ширине body 320px. Это же всё не помещается внутрь body.
В целом, не грамотная верстка. Надо использовать контейнер, а не задавать ширину body.И совет — вендорные префиксы добавляйте в самом конце, когда верстка уже готова и отлажена. Для этого есть post css плагины для редакторов кода
Все значения свойства 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