Не могу понять поведение css, свойство Inline-block?

Question

[Ivan Komarov]

Привет олл.

Подскажите, почему в нижеследующем коде пятый элемент li переносится на другую строку.

HTML

<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>

CSS

ul {
  width: 100%;
 }
 ul li {
   width: 20%;
   display: inline-block;
 }

Answer 1

[Олег]

Добавьте uldisplay: inline-block и lifloat: left

https://codepen.io/ovvivus/pen/yzEpEB

Comments

[gleendo]

Олег Если вовсе изменять решение, то лучше тогда уже использовать flexbox.

body {
  margin: 0;
}

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  width: 20%;
}

[Олег]

Достаточно float: left; а как вы решаете такую задачу в своих проектах?

Answer 2

[Rsa97]

Потому что между блоками есть пробельные элементы - переносы строк. По этим элементам строка и разрывается.

Answer 3

[gleendo]

ul {
  width: 100%;
  font-size: 0;
}

ul li {
  width: 20%;
  display: inline-block;
  font-size: 14px;
}