Как сделать ссылки строчно блочными в css
Перейти к содержимому

Как сделать ссылки строчно блочными в css

  • автор:

Особенности строчно-блочных элементов в CSS

Существуют теги, которые при отображении на экране являются . Строчно-блочные элементы сочетают особенности блочных и строчных элементов.

Вы пока знаете только один такой тег: img . Картинки, однако, не раскрывают все особенности этой модели, поэтому работу таких элементов посмотрим на примере тегов span , сменив им блочную модель, задав свойству display значение inline-block .

Трепачёв Дмитрий © 2012-2024
t.me/trepachev_dmitry

Блочные и строчные элементы

В HTML существует два типа элементов — блочные (block elements) и строчные (inline elements). Ниже вы узнаете особенности этих элементов и разницу между ними, а также способы управлять ими через правила CSS.

Блочные элементы

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

Строчные элементы

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

Блочные и строчные элементы HTML

Примечание: в HTML5 порядок вложения тегов такой роли не играет. Элементы уже не просто делятся на блочные и строчные, а группируются по смыслу и назначению, представляя собой категории контента.

CSS-свойство display: меняем тип элемента

При помощи крайне полезного свойства display в CSS можно заставить блочный элемент выглядеть как строчный и наоборот. Чтобы блочный элемент вел себя как inline-элемент (т. е. не переводился на новую строку), для него необходимо записать правило:

display: inline;

Если же необходимо отобразить строчный элемент как block-элемент (чтобы до и после элемента происходил перенос строки), запишите следующее:

display: block;

Значения display:inline и display:block

Также можно сделать «гибрид» — блочный элемент с поведением, как у строчного. В этом случае всё содержимое таких блочных элементов будет отображаться, как обычно, но при этом блоки будут вести себя как строчные элементы, выстраиваясь в одной строке друг за другом и переносясь на новую строку лишь при необходимости. Схлопывание margin в таких случаях перестает действовать. Для превращения элемента в блочно-строчный запишите:

display: inline-block;

Свойство display:inline-block

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

Строчно-блочные элементы

Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают случаи, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 3.28 состоит из секций, в которые входит изображение с подписью к нему, при этом секции выстраиваются по горизонтали, занимая всю доступную ширину. При уменьшении окна браузера секции переходят на другую строку.

Рис. 3.28. Галерея фотографий

Если для формирования секций использовать тег , как блочный элемент он будет каждый раз начинаться с новой строки. Для строчных элементов нельзя задать цвет фона всей секции и установить её размеры. Наиболее популярное решение в подобных случаях это использование свойства float , которое будет рассмотрено в следующем разделе. Пока же остановлюсь на строчно-блочных элементах, которые сочетают преимущества строчных и блочных элементов.

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

Характеристики этих элементов следующие.

  • Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
  • Высота элемента вычисляется браузером автоматически, исходя из содержимого блока.
  • Ширина равна содержимому плюс значения отступов, полей и границ.
  • Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
  • Можно выравнивать по вертикали с помощью свойства vertical-align .
  • Разрешено задавать ширину и высоту.
  • Эффект схлопывания отступов не действует.

Чтобы создать галерею, представленную на рис. 3.28 для тега следует задать значение display как inline-block , а внутрь него добавить изображение и подпись через тег

(пример 3.18).

Пример 3.18. Использование display

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

    Галерея   

Поскольку все фотографии имеют одинаковый размер, ширина блока задана явно и равна 150px, но высота не указывается, поэтому при длинной подписи к рисунку высота секций будет различаться (рис. 3.29).

Разная высота секций

Рис. 3.29. Разная высота секций

Это не является проблемой, поскольку в любом случае секции будут выводиться упорядоченно рядами, несмотря на разную высоту. При этом можно изменить вид выравнивания через vertical-align , добавив это свойство к классу photo . Если указать значение top , то поменяется отображение секций (рис. 3.30).

Выравнивание по верхнему краю

Рис. 3.30. Выравнивание по верхнему краю

Основной проблемой выступает браузер IE до версии 7.0 включительно. Этот браузер применяет значение inline-block только для строчных элементов и с блочными элементами работает некорректно. Чтобы убедить этот браузер правильно отображать наш пример, необходимо вместо inline-block использовать значение inline и установить свойство hasLayout . Добавление inline разрушит макет в остальных браузерах, поэтому правильным решением будет воспользоваться условными комментариями (пример 3.19).

Пример 3.19. Стиль для IE

  


Пример 3.20. Каталог товаров

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Каталог   

Видео 1856

Фото 315

Мобильные устройства 2109

Компьютеры и орг.техника 4296

Бытовая техника 731

Результат данного примера показан на рис. 3.31.

Каталог товаров

Рис. 3.31. Каталог товаров

Чтобы не задавать каждому тегу , которых может быть довольно много, свой класс, в примере введён с идентификатором catalog и стиль применяется к тегам внутри него.

Как сделать такой строчно-блочный список с помощью css?

введите сюда описание изображения

Как можно сделать такой строчно-блочный список, как на фото:

Отслеживать
15.9k 8 8 золотых знаков 52 52 серебряных знака 100 100 бронзовых знаков
задан 6 янв 2017 в 16:10
Никита Пименов Никита Пименов
21 2 2 бронзовых знака
display: inline-block;
6 янв 2017 в 16:15
@Elena, пробовал, не получается, текст списка заходят друг под друга и маркеры пропадают
6 янв 2017 в 16:17
Данный вопрос следует закрыть, потому что вопрос-картинка бесполезен для базы знаний.
7 янв 2017 в 23:06

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Это можно осуществить с помощью flexbox:

body ul < display: flex; margin: 0; padding: 0; list-style: none; width: 500px; flex-wrap: wrap; >ul > li < display: block; width: 250px; height: 100px; >ul > li > .header < display: flex; text-transform: uppercase; align-items: center; font-size: 20px; margin-bottom: 20px; color: #073361; >ul > li > .header:before < content: ''; display: inline-block; width:12px; height: 12px; margin-right: 20px; background-color: #41b7c3; >ul > li > .text < display:block; padding-left: 34px; color: #22578f; >/* #41b7c3 */

Отслеживать
ответ дан 6 янв 2017 в 16:31
15.9k 8 8 золотых знаков 52 52 серебряных знака 100 100 бронзовых знаков
огромное спасибо
6 янв 2017 в 16:34

ul < list-style: square; font-size: 20px; >li < color: #42B6C3; >.hd < color: #3A5775; text-transform: uppercase; >.cn

Поскольку народ испугался таблиц из ужасных баек фронэндеров я заменил её на div. Хотя если подумать таблицы это основополагающий элемент в электронных документах.

ul < list-style: square; font-size: 20px; >li < color: #42B6C3; >.hd < color: #3A5775; text-transform: uppercase; >.cn < color: #7B90AB >.ux

Отслеживать
ответ дан 6 янв 2017 в 16:32
10k 15 15 золотых знаков 53 53 серебряных знака 119 119 бронзовых знаков
Конечно пример рабочий, но он какой-то странный )
6 янв 2017 в 16:34

@УткаУчитсяУму а флексбох это экспериментальная технология. мне кажется два дива в элемент списка сувать не правильно. ну css огромный ко всему )

6 янв 2017 в 16:37
@perfect, почему не правильно? Это займёт меньше места в CSS
6 янв 2017 в 16:38

flexbox во всех современных браузерах поддерживается нормально, самый хороший на текущий момент ответ дала @Elena в комментариях. А Вы мешаете структуру с внешним видом. Ну серьезно, этот ответ был морально устаревшим лет пять назад. Работать то работает, но верстай вы так в нормальном проекте - никто с вами разговаривать не будет.

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

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