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

Question

У меня есть неупорядоченный список, который мне нужен, чтобы сосредоточиться внутри div, но также и бок о бок. Для этого я использовал text-align: center; на div и display: inline-block; на элементах списка. Однако, когда я это делаю, между элементами списка появляется пробел. Here is a demo

HTML

<div class="wrap"> 
    <ul> 
     <li>hello</li> 
     <li>buddy</li> 
     <li>good</li> 
     <li>morning</li> 
    </ul> 
</div> 

CSS

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

ul { 
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
    width: 95%; 

} 

div.wrap { 
    width: 500px; 
    border: 1px solid red; 
    text-align: center; 
} 

Answer 1

Проблема возникает из-за того, что элементы теперь обрабатываются как слова при установке на display: inline-block, поэтому новая линия между элементами рассматривается как пробел.

у вас есть несколько вариантов, 1, чтобы удалить символ новой строки между элементами: http://jsfiddle.net/26eg9/8/

или вы можете также установить размер шрифта в родительском elemnt до 0 и сброса в элементе списка, как например: http://jsfiddle.net/26eg9/3/

Лично я предпочел бы второй, потому что он держит HTML-документ в порядке.

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

Answer 2

Встроенные элементы соблюдать пробелы. Буквально удалите пробелы в разметке.

jsFiddle example - нет пробела между ними

ОБНОВЛЕНО HTML

<div class="wrap"> 
    <ul> 
    <li>hello</li><li>buddy</li><li>you</li><li>stink</li> 
    </ul> 
</div> 

Есть альтернативы, такие как using negative margins (example) или setting the parent's font-size to 0px (example), затем сбрасывают ребенок. Однако наиболее оптимальным решением, которое будет поддерживаться в браузерах, является удаление пробелов в разметке.

Answer 3

Пространства идут от разрывов строки - HTML интерпретирует новые строки в качестве одиночный символ пробела.

Есть несколько способов обойти это - вы можете добавить поплавок к li элементов, удалить пробелы из разметки, отрицательных полей и т.д. путь, который кажется наиболее полезным в вашем случае является добавление font-size: 0 к контейнер (я сделал это с оберткой div, но вы могли бы сделать это на ul, если это необходимо), а затем установите font-size явно для li с вместо этого.

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

ul { 
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
    width: 95%; 

} 

div.wrap { 
    width: 500px; 
    border: 1px solid red; 
    text-align: center; 
    font-size: 0; 
} 

Here is an updated JSFiddle.

Answer 4

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

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

<ul> 
    <li>hello</li> 
    <li>buddy</li> 
    <li>good</li> 
    <li>morning</li> 
</ul> 

создать свой HTML код, как это:

<ul> 
    <li> hello </li> 
    <li> buddy </li> 
    <li> good </li> 
    <li> morning </li> 
</ul>