Как задать ширину для потомка в процентах?

Question

[Денис Дормадехин]

Здравствуйте, есть такая проблема:
Есть список, который занимает 100% ширины родителя, и пять элементов списка, каждый из которых занимает 20% ширины, но последний блок не помещается и переносится на следующую строку.
Может у кого то есть идеи как это решить?

<ul>
	<li><a href="#">пункт 1</a></li>
	<li><a href="#">пункт 2</a></li>
	<li><a href="#">пункт 3</a></li>
	<li><a href="#">пункт 4</a></li>
	<li><a href="#">пункт 5</a></li>
</ul>

ul{
	display: block;
	width: 100%;
}

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

Comments

[Сергей delphinpro]

ul { font-size:0;}
li { font-size: 1rem;}

[Ярослав Иванов]

Потому что у инлайнгвых элементов есть отступ. Гуглите как их убрать

Answer 1

[Андрей Свердлов]

css-live.ru/articles/zagadochnye-otstupy-mezhdu-in...
С этим в начале пути сталкивается любой верстальщик

Answer 2

[Сергей Горячев]

https://jsfiddle.net/webirus/jmbnsndz/
Как вариант, перенести открывающий и закрывающий li на одну строку.
Этот отступ между inline-block можно победить разными способами.

Answer 3

[Андрей Токмаков]

https://jsfiddle.net/nrca3pd1/4/

Comments

[Андрей Токмаков]

Sergey Goryachev: Зачем? Это решает проблему, это во первых, а во вторых https://www.w3.org/TR/REC-html40/struct/lists.html...
Есть такие теги, которые закрывать не обязательно.
Может с этим и возникнут проблемы при большой вложенности, но в случае меню ни чего страшного не будет, в этом случае только плюс - пропадают отступы

[Андрей Токмаков]

И да это один из способов, про которые Вы сами же написали ниже

Этот отступ между inline-block можно победить разными способами

[Андрей Токмаков]

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

[Сергей delphinpro]

Sergey Goryachev: главное что спека позволяет ;)

[Сергей Горячев]

Сергей: Андрей Токмаков: ладно, ладно, убедили. накинулись сразу, коршуны)

[Сергей delphinpro]

Андрей Токмаков: на самом деле не всегда проще. если мы имеем дело с каким нибудь вордпрессом-джумлой, потребуются лишние телодвижения.
собственно поэтому я и не вспоминаю этот способ. как и вариант предложенный Sergey Goryachev и вариант с комментариями

[Андрей Токмаков]

Сергей: Когда речь идет о всяких жумлах и вордпрессах, тогда можно вообще забыть про всякую спецификацию. В этом случае только бог в помощь, ну или документация cms )