Дело в том, что inline-block'и - это как слова.
Если между ними в разметке есть пробельные символы, то браузер отобразит пробел.
Перечислю несколько нормальных способов убирания пробелов.
Есть ещё охапка не слишком нормальных - про них промолчу.
Писать их подряд
ul {
text-align: center;
}
li {
list-style: none;
display: inline-block;
border:1px solid #000;
}
<ul>
<li>1</li><li>2</li><li>3</li>
</ul>
Или так
ul {
text-align: center;
}
li {
list-style: none;
display: inline-block;
border:1px solid #000;
}
<ul>
<li>
1
</li><li>
2
</li><li>
3
</li>
</ul>
Использовать комментарии
ul {
text-align: center;
}
li {
list-style: none;
display: inline-block;
border:1px solid #000;
}
<ul>
<li>1</li><!--
--><li>2</li><!--
--><li>3</li>
</ul>
Не закрывать li явно
ul {
text-align: center;
}
li {
list-style: none;
display: inline-block;
border:1px solid #000;
}
<ul>
<li>1
<li>2
<li>3
</ul>
Дополнение
В css нет честного способа не вообще не показывать пробелы между элементами. Есть костыль с font-size
ом (описанный в соседнем ответе), который не только гробит наследование размера шрифта, но и не работает в некоторых браузерах; есть костыль с word-spasing
/letter-spacing
/margin
, в котором мало того, что под каждый браузер своя конструкция, так он ещё и привязан к шрифту, поскольку ширина пробела различна в разных шрифтах. Убрать пробел из разметки - это честный способ, остальные - нет. А если надо только css, то следует отказаться от inline-block
и использовать flex
или float
, но вопрос не об этом.
А вот что случается с теми, кто считает иначе.
На всякий случай приведу вариант с использованием flexbox
Здесь нет привязки к разметке, однако, flex-box в некотором роде подобен таблицам и его не рекомендуется использовать для значительных частей сайта (например, лейаута) из-за возможного снижения производительности.
К тому же стоит проверить поддержку браузерами и необходимость использования префиксов.
ul {
display: flex;
justify-content: center;
}
li {
list-style: none;
border: 1px solid #000;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>