Дочерние пролеты одинаковой ширины
Я пытаюсь создать горизонтальное меню с элементами, представленными <span>. Само меню (родительский <div>) имеет фиксированную ширину, но количество элементов всегда разное.
Я хотел бы иметь дочерние <span> одинаковой ширины, независимо от того, сколько их там.
Что я сделал до сих пор: добавил стиль float: left; для каждого диапазона и указал его процентную ширину (проценты более или менее хороши, поскольку сервер знает во время генерации страницы, сколько пунктов меню есть и может делить 100 % к этому числу). Это работает, за исключением случая, когда у нас есть остаток от деления (например, для 3 элементов), в этом случае у меня есть отверстие в один пиксель справа от родительского <div>, и если я округляю проценты в большую сторону, последний элемент меню завернут. Еще мне не очень нравится генерация стилей на лету, но если другого решения нет, все в порядке.
Что еще я мог попробовать?
Похоже, это очень распространенная проблема, однако поиск в Google "дочерних элементов одинаковой ширины" не помог.
Ответы 4
Если у вас есть контейнер фиксированной ширины, вы теряете часть эффективности дочернего диапазона ширины в процентах.
Для вашего случая 33% вы можете добавить класс к первому и каждому 4-му дочернему диапазону, чтобы при необходимости установить правильную ширину.
<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; }
Вы можете попробовать стол с фиксированным макетом. Он должен рассчитывать ширину столбца, не обращая внимания на содержимое ячейки.
table.ClassName {
table-layout: fixed
}
Вы пробовали десятичные значения, например, устанавливали ширину 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 промежутка из трех шире, чем остальные .
Что касается ответа Сиань, есть также псевдоэлемент: first-child. Вместо того, чтобы иметь класс первого в ряду, у вас будет это.
span:first-child {
width: auto;
}
Очевидно, это применимо только к однострочному меню.
Было плохо, когда люди использовали table для всего (потому что CSS еще не существовало). Иногда бывает наоборот. Кто-то опишет функциональность таблицы и спросит, как это сделать без таблицы, как если бы таблицы изначально плохие. Вздох.