Не работает display:inline-block

Не работает display:inline-block , блоки находятся в разных частях страницы, налазят на другие элементы. Как это исправить?

#text1 < color: green; text-align: center; font-size: 25px; font-family: Calibri; font-weight: lighter; >#borov < width: 384px; height: 384px; position: relative; left: 175px; border: 1px solid black; >#borovtupo < width: 768px; height: 768px; margin: 0px auto 250px auto; >.button

 
Биография Жмышенка Валерия Альбертовича
   
тест
 
 
тест





 
 

Р ешение 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 при помощи кнопок предостаточно: много различных стилей, которые прийдется обнулять, невозможность кроссбраузерно и легко сделать простую ссылку на кнопочной основе, ну и изначальная семантика кнопки, из-за которой возможность её применения будет возникать очень редко.

Центрирование резинового блока по горизонтали

Представь типичный фрагмент сайта: фотография, а под ней ссылка с выравниванием по-центру:

Тут все просто. Самое долгое в верстке этого блока — вырезать фотографию. Давай немного усложним задачу: ссылка должна выглядеть как кнопочка (т.е. иметь фон). Например, такой:

Тоже легко? Контейнеру text-align: center, ссылке display: block, margin: 0 auto, фон и ширину… Стоп! А если ссылка-кнопка резиновая? Ширину-то задавать и нельзя! А без нее блочный элемент разъедется на все доступное пространство. Как же его подогнать под размер содержимого?

Как вариант задать float, например, left. Элемент останется блочным, а значит фоновый рисунок не пострадает, и сожмется до размеров содержимого. Решения найдено? Как бы не так! Теперь margin: 0 auto не работает и кнопка преспокойненько прилипла к левому краю!

Ну и дела! Похоже придется задавать margin-left в зависимости от ширины надписи…

Пробуем включить мозг. Итак:

1. Чтобы присвоить фоновую картинку ссылке, ее нужно сделать блочной.
2. Чтобы спозиционировать блочный элемент по центру экрана нужно задать ему ширину, иначе он растянется на всю ширину родительского элемента.
3. Чтобы элемент не растягивался на всю ширину родителя для него обычно прописывают 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 алгоритм такой:

1. В правилах для IE6-7 сделать элемент строчным (display: inline).
2. Установить этому элементу 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 были в одну линию.

    • Вопрос задан более двух лет назад
    • 279 просмотров

    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 плагины для редакторов кода

    Похожие публикации:

    1. Conio h чем заменить
    2. R studio как пользоваться пошаговая инструкция
    3. Как увеличить шрифт на айфоне
    4. Почему не работает графический планшет