Как убрать поле по умолчанию для встроенных элементов li?

У меня есть следующий html

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

и folliwing css

li {
    display: inline-block;
    padding: 10px;
    border: 1px solid red;
    margin: 0;
}

DEMO

Я пытаюсь удалить маржу среди элементов li, установив margin: 0;. Но он не удаляет поля

Как удалить его

Ответ 1

Объединение всех li в одну строку решает проблему. Но если вы хотите узнать больше методов для удаления этих полей, вы можете посетить: http://davidwalsh.name/remove-whitespace-inline-block.

В нем перечислены следующие методы:

1. Нет пространства между элементами

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

2. font-size: 0 on Parent

.inline-block-list { /* ul or ol with this class */
font-size: 0;
}

.inline-block-list li {
font-size: 14px; /* put the font-size back */
}

3. Комментарии HTML

<ul>
 <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

4. Отрицательная маржа

.inline-block-list li {
margin-left: -4px;
}

5. Снижение угла закрытия

<ul>
 <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

Ответ 2

Попробуйте float: left; Это заставит ваши элементы списка отображаться без лишних пробелов.

li {
    display: inline-block;
    padding: 10px;
    border: 1px solid red;
    margin: 0;
    float: left;
}

Ответ 3

Своя странная вещь, где вам нужно удалить пробелы, взгляните на эту скрипту

<ul>
    <li>one</li><li>two</li><li>three</li>
</ul>

http://jsfiddle.net/TPje6/3/

вы можете добавить еще margin: -2px;: http://jsfiddle.net/TPje6/6/

Поплавковый трюк хорошо работает, но делает сложным положение стиля

Ответ 4

Измените отметку в одной строке, чтобы удалить пробелы по умолчанию

<ul>
    <li>one</li><li>two</li><li>three</li>
</ul>

Css

li {
    display: inline; // Change
    padding: 10px;
    border: 1px solid red;
    margin: 0;
}

Демо

Ответ 5

Это раздражающий побочный эффект того, как визуализируется пробел для встроенных элементов. Для решения этой проблемы есть несколько вариантов.

Вариант 1: используйте свойство float: left для элементов li

jsfiddle

li {
    display: inline-block;
    padding: 10px;
    border: 1px solid red;
    margin: 0;
    float: left;
}

Вариант 2: Удалите пробелы из разметки html

jsfiddle

<ul>
    <li>one</li><li>two</li><li>three</li>
</ul>

Вариант 3: Задайте для свойства font-size значение ul: 0px

jsfiddle

ul {
    font-size: 0px;
}

li {
    display: inline-block;
    padding: 10px;
    border: 1px solid red;
    margin: 0;
    font-size: 16px;
}

Ответ 6

Вы можете сделать li be font-size: 0; и затем установите li a в нормальный font-size

Таким образом вы сделаете пробел шириной 0 пикселей и сохраните html чистый и легко читаемый.

Ответ 7

Используйте следующее правило css для рендеринга стиля

li {
    border: 1px solid #FF0000;
    display: table-column-group;
    float: left;
    margin: 0;
    padding: 10px;
   }