Дочерние промежутки одинаковой ширины

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

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

Как указано в синтаксисе CSS, свойство ширины (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), некоторые типы значений должны быть целыми числами и обозначаются как <integer>, а другие являются действительными числами, обозначаемыми как <number>.Процент определяется как <число>, а не как <целое число>, поэтому это может сработать.

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

Answer 4

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

span:first-child {
    width: auto;
}

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