Лучший способ управления пробелами между строчными элементами списка

Мой 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>

Но это поддерживается в основном вручную, и мне было интересно, есть ли более чистый способ сделать это.

Ответы

Ответ 1

Несколько вариантов здесь, сначала я дам вам обычную практику при создании встроенных списков:

<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 */

Понимая, что вы хотели бы УДАЛИТЬ пробелы, просто отрегулируйте поля/дополнение соответственно.

Ответ 2

Другим полезным способом устранения пробелов является установка свойства list font-size в 0, а элементы списка - обратно до требуемого размера.

Ответ 3

Что вам действительно нужно, это 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>

Посмотрите на это решение, если вы в порядке используете поплавки, и в зависимости от требований вам может понадобиться добавить трейлинг-код <li>, который установлен на clear: both;.

Но свойство CSS3, вероятно, является лучшим теоретическим способом.

Ответ 4

Лучшим решением для элементов списка является использование:

#nav li{float:left; width:auto;}

Имеет точно такой же визуальный эффект без головной боли.

Ответ 5

Принять HTML без HTML и пропустить </li>.

<ul id="nav">
    <li><a href="./">Home</a>
    <li><a href="/About">About</a>
    <li><a href="/Contact">Contact</a>
</ul>

Затем установите свойство отображения элементов в встроенный блок вместо встроенного.

#nav li {
    display: inline-block;
    /display: inline; /* for IE 6 and IE 7 */
    /zoom: 1; /* for IE 6 and IE 7 */
}

Ответ 6

Проблема заключается в размере шрифта в UL. Установите его на 0, и он исчезнет, но вы не хотите, чтобы фактический текст был установлен настолько малым, чтобы затем установить свой размер шрифта LI так, как вы хотите.

<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>

Ответ 7

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

Вместо этого:

<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>

Ответ 8

<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline;  content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
</body>
</html>