Как растянуть элементы на весь блок?

Question

[Gagatyn]

Вот пример tabs/закладок. Как мне растянуть все эти закладки по всей ширине родителя, чтобы все три умещались сверху или больше чем 3?

Answer 1

[Андрей Федоров]

Вот так. Важно чтобы между тегами </li><li> не было пробелов или переносов строки, либо они были закомментированы.
https://jsfiddle.net/4qg0nosg/1/

Comments

[Максим]

у вас там один li вывалился из потока , как пример не работает

[Андрей Федоров]

. Shadow: Не люблю jsfiddle, никак не показывает сохранил я изменения или нет... поправил...

[Максим]

Андрей Федоров: пардон Сэр , компенсировал извинения тем что "Нравится"

[Gagatyn]

Андрей Федоров: и все? Удивительно и странно, вроде это табуляция и оформления ради читабельности кода, а оно вон оно как. Спасибо

[Андрей Федоров]

Gagatyn: li считается строчным (inline) элементом html. для лучшего понимания его можно представлять как букву в слове, таким образом когда браузер видит в коде, что после этой "буквы" идет не другая буква, а пробел, перенос строки или табуляция он думает, что "буква" последняя в слове и вставляет межсловарный интервал, который в вашем случае влияет на ширину вкладки - она становится равна calc(100%/3)+межсловарный интервал и соответственно 3 вкладки уже не умещаются в 100% ширины.

[Gagatyn]

Андрей Федоров: еще один способ решения проблемки:

ul {
font-size: 0;
   li {
      font-size: 16px;
       }
}

[Андрей Федоров]

Gagatyn: Только если вы знаете изначальный размер шрифта, причем обязательно в абсолютных единицах. Обычно, и особенно если у вас адаптивный сайт, возможности так восстановить размер шрифта не имеется или шрифт восстаналивается "на глаз".
С внедрением кастомных свойств в css ситуация облегчается, но только если браузер их поддерживает.

Answer 2

[Aleksei Podgaev]

используйте лучше flexbox. c float у меня лично вечно проблемы - всё съезжает

Comments

[Aleksei Podgaev]

Вот хорошее описание, которое должно помочь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

[Егор Живагин]

Пожалуйста, готово . Flex надёжнее float-ов, да и удобнее

Answer 4

[tommy_13]

можно использовать float, можно использовать table-cell