FreeTibet
@FreeTibet
dharma supplier

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

Привет олл.

Подскажите, почему в нижеследующем коде пятый элемент 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;
 }
  • Вопрос задан
  • 176 просмотров
Решения вопроса 1
ovvivus
@ovvivus
Добавьте uldisplay: inline-block и lifloat: left

https://codepen.io/ovvivus/pen/yzEpEB
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Потому что между блоками есть пробельные элементы - переносы строк. По этим элементам строка и разрывается.
Ответ написан
Комментировать
evgeniy8705
@evgeniy8705
Повелитель вселенной
ul {
  width: 100%;
  font-size: 0;
}

ul li {
  width: 20%;
  display: inline-block;
  font-size: 14px;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы