Отступ между элементами LI

optimismous · October 15, 2011

Всем привет! Не могу понять почему между тегами li остается расстояние:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
ul {
margin: 0;
padding: 0;
}

ul li {
display: inline-block;
list-style-type: none;
list-style-position: inside;
height: 24px;
margin: 0;
padding: 0;
border: 1px solid red;
}
</style>
</head>

<body>

<ul>
<li><a href="#">раз</a></li>
<li><a href="#">два</a></li>
<li><a href="#">три</a></li>
</ul>


</body>
</html>

Подскажите пожалуйста как его убрать.

psywalker · October 15, 2011

http://forum.htmlbook.ru/index.php?showtopic=28911

Gaspode · October 15, 2011

Это из-за inline-block.

Тут два выхода, первый — поменяйте display: inline-block на float: left (поток очистить только не забудьте потом), второй — уберите переводы строк в коде между li. Вот так то есть:

<li><a href="#">раз</a></li><li><a href="#">два</a></li><li><a href="#">три</a></li>

Но это дурацкий выход.

Вроде ещё как-то через word-spacing решается :unsure:

Edited October 15, 2011 by Gaspode

optimismous · October 17, 2011

psywalker, Gaspode, спасибо большое за помощь.

SelenIT · October 17, 2011

Но это дурацкий выход.

Дурацкий не дурацкий, но это единственный реальный выход. Остальные — лишь эмуляция.

В HTML (включая 5) есть еще выход — воспользоваться опциональностью закрывающих тегов для <li> (кстати, IE7 эти закрывающие теги в любом случае игнорирует). Тогда и читабельность сохраняется, и пробелов между элементами не остается. В XHTML, понятно, так нельзя, но нужно помнить, что 99% "якобы XHTML" — не более чем самообман и обман валидатора...

rediskavet · October 18, 2011

Промежуток появляется т.к. перевод строк в коде это тот-же пробел между строчными элементами.

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


<ul>
  <li>раз</li
  ><li>два</li
  ><li>три</li>
</ul>

Но я обычно делаю по другому, в стилях для родительского ul прописываю font-size: 0; а для лишек возвращаю font-size: 16px; , тогда пробел между элементами пропадает.

Остальные — лишь эмуляция.

Непринципиально. Главное что-бы работало. не?

SelenIT · October 18, 2011

для родительского ul прописываю font-size: 0; а для лишек возвращаю font-size: 16px;

Известный способ (если не самый популярный), но 1) в вебкитных могут всё равно оставаться однопиксельные зазоры, 2) не всегда явный размер шрифта подходит (напр., его уже не смасштабировать вместе со шрифтом родительского элемента).

Главное что-бы работало. не?

Решение тем и отличается от его эмуляции, что работает всегда, а не только при некоторых допущениях

Sign In

Отступ между элементами LI

Question

optimismous

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

optimismous

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

rediskavet

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information