Дочерние пролеты той же ширины

Question

Я пытаюсь создать горизонтальное меню с элементами, представленными <span>. Само меню (родительское <div>) имеет фиксированную ширину, но номер элемента всегда отличается.

Я бы хотел иметь детей <span> одинаковой ширины, независимо от того, сколько их там.

Что я сделал до сих пор: добавил стиль float: left; для каждого промежутка и указал его ширину в процентах (проценты более или менее хороши, поскольку сервер знает во время генерации страницы, сколько пунктов меню там и можно поделить 100% на это число). Это работает, за исключением случая, когда у нас есть остаток от деления (например, для 3 элементов), в этом случае у меня есть дыра в один пиксель справа от родителя <div>, и если я округлю проценты вверх, последний элемент меню обернут. Я также не очень люблю генерацию стилей на лету, но если нет другого решения, все в порядке.

Что еще я мог попробовать?

Кажется, что это очень распространенная проблема, однако поиск в Google для "дочерних элементов одинаковой ширины" не помог.

Answer 1

Вы можете попробовать таблицу с фиксированной разметкой. Он должен вычислять ширину столбца, не связываясь с содержимым ячейки.

table.ClassName {
    table-layout: fixed
}

Answer 2

Если у вас есть контейнер фиксированной ширины, вы теряете часть эффективности дочернего диапазона в процентах ширины.

Для вашего случая 33% вы можете добавить класс к первому и каждому четвертому дочернему промежутку, чтобы при необходимости установить правильную ширину.

<div>
<span class="first-in-row">/<span><span></span><span></span><span class="first-in-row"><span></span><span></span>...
</div>

, где

.first-in-row { width:auto; /* or */ width:XXX px; }

Answer 3

Что касается ответа Сианя, есть также псевдоэлемент: first-child. Вместо того, чтобы иметь первый в ряду класс, у вас будет это.

span:first-child {
    width: auto;
}

Очевидно, что это применимо только к однострочному меню.

Answer 4

вы пробовали десятичные значения, например, установили ширину 33,33%?

Как указано в синтаксисе CSS, свойство width (http://www.w3.org/TR/CSS21/visudet.html#the-width-property) может быть задано как (http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage),, которое указано как .

Как сказано в определении числа (http://www.w3.org/TR/CSS21/syndata.html#value-def-number),, существуют некоторые типы значений, которые должны быть целыми числами и указываются как , а остальные являются действительными числами, указанными как . Процент определен как , а не , поэтому он может работать.

Это будет зависеть от способности браузера разрешить эту ситуацию, если он не сможет разделить родительский блок на 3 без остатка, будет ли он занимать 1 или 2 пикселя или сделает 1 или 2 пролета из трех более широкими чем остальные.