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

Question

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

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

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

Понимая, что вы хотите удалить пробел, просто отрегулируйте поля / отступы соответственно.

Answer 2

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

Answer 3

Что вам действительно нужно, так это CSS3 white-space-collapse: сброс . Но я не уверен, поддерживают ли это свойство какие-либо браузеры.

Пара альтернативных решений состоит в том, чтобы позволить хвостовой части тега использовать пробелы. Например:

<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, вероятно, является лучшим теоретическим путем.

Answer 4

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

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

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

Answer 5

Принять HTML не на основе XML и пропустить </li>.

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

Затем установите для свойства отображения элементов значение inline-block вместо inline.

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

Answer 6

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

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

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

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