display: inline-block

18.02.2009, 03:20
Рубрика: html

Надоели списки. Захотелось сделать на каждой строке по одной ссылке, без вспомогательных тэгов

a { display: block; }

<a href="#">11111</a>
<a href="#">22222</a>
<a href="#">33333</a>
<a href="#">44444</a>

Но тогда вся строка становится кликабельной, что не есть хорошо. Обнаружился интересный параметр inline-block у display. Но как оказалось FF2 и ниже не воспринимает его. Есть аналог -moz-inline-box, но зачем же такой изврат был сделан, не понятно. Удалось найти несколько решений, но свой изврат тоже родился:

a {
display: block;
width:1; /* при 0, opera отказалась показывать ссылки */
white-space:nowrap; /* при 1 пикселе, естественно будут переходы */
}
<a href="#">11111</a>
<a href="#">22222</a>
<a href="#">33333</a>
<a href="#">44444</a>

Получаем отличный результат (тестировалось на IE6, IE7, Opera 9.21, Opera 9.51, FF2, Chrome):

11111 22222 33333 44444

Ссылки по теме:

18.02.2009 - display: inline-block

Комментарии

Антон (28.11.2009, 23:23:28) пишет:

На мобильных браузерах может плохо выглядеть, поэтому лучше всё же списками.

inline
display inline
display
display: inline
display:inline
IE div display: inline
display block
opera inline
display inline ie6
display block ie6
аналог inline
ie7 inline
html display block
html display inline
display inline block
display block ie7
display: inline;
display:block html
ie7 + display
что такое display:inline
display inline chrome
display:block для ссылки
display:block opera проблемы
inline тег
что такое display: block;
display inline html
html display: inline
display:block в ie6
не работает inline
chrome display block
display: inline opera
display inline block opera
opera block in inline
space after inline
display:inline; теги
display:inline opera
что такое display
display:block html
ie7 display
тег a DISPLAY: block;
inline
inline и inline
ie6 inline
ie display block in inline
display inline block FF2

display:inline+opera

inline html IE6

html inline

display inline не работает