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

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

Однако пробел между буквами li появляется.Я могу удалить пробелы, свернув их следующим образом:

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

Очевидно, что я пропустил hover и активные наборы, но это создает хорошую навигацию на уровне блоков и является очень распространенным способом сделать это, при этом оставаясь в соответствии со стандартами. / * не забудьте настроить по своему вкусу, добавить цвет фона и так далее * /

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

   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>