Избавление от разрыва между типом стиля списка и текстом

Question

Ну, вот HTML-код:

<ul>
  <li>first item</li>
  <li>second item</li>
</ul>

и css:

ul, li { margin: 0px; padding: 0px; }

Ничего особенного, верно? И нечем гордиться, он просто показывает список без полей и отступов. Ну, почти ...

А как насчет этого пространства? Я не могу избавиться от этого. Есть идеи? :]

Answer 1

Если вы хотите убрать пробел между текстом и маркером, вам нужно немного изменить HTML-код:

<ul>
  <li><span>first item</span></li>
  <li><span>second item</span></li>
</ul>

Задавая относительную позицию li и абсолютную позицию диапазона, вы можете переместить диапазон влево:

li {
    position: relative;
}

li span {
    position: absolute;
    left: 0;
}

Answer 2

Единственный надежный кросс-браузерный способ добиться этого - сбросить пули и использовать вместо них фоновые изображения на li с. Это работает во всех основных браузерах (даже IE5 и Netscape 7.1) и не требует каких-либо изменений в самом HTML. См. Listamatic для превосходного руководства.

Answer 3

Вы можете взломать его, чтобы заставить его работать, но, возможно, вы захотите удалить стили списка и использовать вместо этого фон на <li>, как будто вы будете иметь полный контроль над ним.

Хорошая справка об этом: http://www.alistapart.com/articles/taminglists/

W3Schools: http://www.w3schools.com/Css/css_list.asp