Как заставить все элементы li в ul иметь одинаковый размер с самым большим элементом без установки фиксированного размера?

Question

У меня есть список категорий на странице, каждая с вложенным списком подкатегорий. Стиль элементов списка категорий упорядочивает элементы в сетке (через display:inline; float:left), с подкатегориями, отображаемыми внизу в обычном макете списка. Категории и подкатегории настраиваются пользователем, хотя я не ожидаю, что их будут сотни (вероятно, не более 10 или 20 подкатегорий для каждой из 3 или 4 категорий).

Я бы не стал устанавливать фиксированный размер для каждого элемента списка. Я хотел бы нарисовать границу вокруг каждого элемента, но мне не нравится, как он выглядит, когда размер каждого элемента списка основан на его содержимом. Есть ли способ обойти это без установки фиксированного размера элементов списка?

Answer 1

Установка ul на float: left, кажется, помогает.

Пример: http://jsbin.com/uluke

Answer 2

На самом деле это возможно.

<div style="float: left"> 
  <div style="display: block">
    <div class="cat">Category #1</div>
    <div class="sub">Sub category #1</div>
    <div class="sub">Sub category #2</div>
  </div>
  <div style="display: block">
    <div class="cat">Category #2</div>
    <div class="sub">Sub category #1</div>
    <div class="sub">Sub category #2 LONG LONG LONG</div>
  </div>
</div>

Только из-за того, как элементы блока заполняются до максимального размера. Я знаю, что это по умолчанию, просто добавил его, чтобы сделать его более заметным. «Float: left» не требуется, но «display: inline» будет.

Answer 3

Если вам известен размер текста вашей категории средняя , вы можете использовать min-width, чтобы установить для всех элементов этот размер, но разрешить их рост для очень больших элементов. Это может быть даже установлено программно при рендеринге.

Прошу прощения за огромный пример.
CSS

ul.tags {
    display:block;
    margin: 0;
    padding:0;
    width:40em;
}
ul.tags li {
    display:inline-block;
    /* 
    *  or for FF2 compat use            
    display:inline-block;
    float:left;
    */
    margin:2px;
    padding:2px;
    min-width:8em;
    border:1px solid #ddd;
    text-align:center;
}

HTML

<ul class="tags">
        <li>lorem ipsum dolor </li>
        <li>dolor sit amet</li>
        <li>consectetur adipisicing elit</li>
        <li>sed do </li>
        <li>eiusmod tempor incididunt </li>
        <li>ut labore </li>
        <li>et dolore </li>
        <li>magna </li>
        <li>aliqua</li>
        <li>ut enim </li>
        <li>ad minim veniam</li>
        <li>quis nostrud </li>
        <li>exercitation ullamco laboris </li>
        <li>nisi ut </li>
        <li>aliquip </li>
        <li>ex ea </li>
        <li>commodo </li>
        <li>consequat</li>
        <li>duis aute irure </li>
        <li>dolor in </li>
        <li>reprehenderit </li>
        <li>in voluptate </li>
        <li>velit esse </li>
        <li>cillum dolore </li>
        <li>eu fugiat nulla </li>
        <li>pariatur excepteur </li>
        <li>sint </li>
        <li>occaecat cupidatat </li>
        <li>non proident</li>
        <li>sunt in </li>
        <li>culpa qui </li>
        <li>officia deserunt </li>
        <li>mollit anim id est laborum</li>
</ul>

Answer 4

Дисплей: inline и float: left не являются хорошей комбинацией. Фактически настройка отображения на плавающем элементе является избыточной, так как они автоматически становятся блочными после плавания. (за исключением странной ошибки ie6 с двойными полями, нет причин устанавливать отображение: для плавающего элемента)

Answer 5

Вы не можете с помощью CSS, вам придется использовать JavaScript.

Answer 6

Если вы можете изменить свою разметку, чем:

ul {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    border: 1px solid black;
    margin-left: 1em;
}

li.category {
    border: none;
    margin-left: 0;
}


<ul>
    <li class='category'>Category #1</li>
    <li>Sub #A</li>
    <li>Sub #B</li>

    <li class='category'>Category #2</li>
    <li>Longer Sub #C</li>
    <li>Sub #D</li>
</ul>

Answer 7

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