Лучший способ управлять пробелом между встроенными элементами списка
Мой HTML следующие:
<ul id="nav">
<li><a href="./">Home</a></li>
<li><a href="/About">About</a></li>
<li><a href="/Contact">Contact</a></li>
</ul>
И моя CSS:
#nav {
display: inline;
}
Однако пробел между шоу лития. Я могу удалить пробел путем сворачивания их как так:
<ul id="nav">
<li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li>
</ul>
Но это сохраняется в основном вручную, и я задавался вопросом, был ли более чистый способ сделать его.
3 ответа
Несколько опций здесь, сначала я дам Вам свою нормальную практику при создании встроенных списков:
<ul id="navigation">
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">Home</a></li>
</ul>
Тогда CSS, чтобы заставить его функционировать, как Вы предназначаете:
#navigation li
{
display: inline;
list-style: none;
}
#navigation li a, #navigation li a:link, #navigation li a:visited
{
display: block;
padding: 2px 5px 2px 5px;
float: left;
margin: 0 5px 0 0;
}
, Очевидно, я не учел парение и активные наборы, но это создает хорошую навигацию блочного уровня и является очень общепринятой методикой для того, чтобы сделать это при тихом хранении со стандартами./* не забывают настраивать к Вашей симпатии, добавлять цвет к фону, и так далее * /
, Если бы требуется сохранить его только с текстом и просто встроить, никакие элементы блока, я полагаю, что Вы хотели бы добавить:
margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */
Понимание Вас хотело бы УДАЛИТЬ пробел, просто скорректировать поля/дополнение соответственно.
Что вам действительно нужно, так это CSS3 white-space-collapse: discard . Но я не уверен, действительно ли какие-либо браузеры поддерживают это свойство.
Пара альтернативных решений - позволить хвостовой части тега использовать пробелы. Например:
<ul id="nav"
><li><a href="./">Home</a></li
><li><a href="/About">About</a></li
><li><a href="/Contact">Contact</a></li
></ul>
Еще одна вещь, которую я видел, - это использование комментариев HTML для использования пробелов
<ul id="nav"><!--
--><li><a href="./">Home</a></li><!--
--><li><a href="/About">About</a></li><!--
--><li><a href="/Contact">Contact</a></li><!--
--></ul>
См. Решение thismat, если вы не против использовать числа с плавающей запятой, и, в зависимости от требований, вам может потребоваться добавить завершающий < li> , для которого установлено значение очистить: оба; .
Но свойство CSS3, вероятно, лучший теоретический способ.
Еще один полезный способ устранения пробелов — установить для свойства font-size списка значение 0, а для одного элемента списка — обратно требуемое значение. размер.