CSS: Как мне сделать горизонтальный (UL) список, сохраняя каждый элемент одинаковой ширины?

То есть без определения конкретной величины «ширины» для каждого отдельного элемента. Например, самый широкий элемент (по своему содержимому) устанавливает ширину для каждого из других элементов.

Кроме того, как я могу охватить указанный список на 100% по всему его контейнеру, сохраняя при этом каждый элемент одинаковой ширины?


list css width
person Hamster    schedule 15.08.2010    source источник
comment
Я не думаю, что вы можете сделать это без определения ширины.   -  person David says reinstate Monica    schedule 15.08.2010
comment
Без определения конкретной ширины для каждого элемента. :)   -  person Yi Jiang    schedule 15.08.2010
comment
Ну ладно, тогда я попробую работать с шириной. Спасибо, в любом случае.   -  person Hamster    schedule 15.08.2010

Ответы (3)


arrow_upward
2
arrow_downward

Если я правильно понимаю:

  1. Вы хотите список.
  2. Вы хотите, чтобы каждый элемент списка был одинаковой ширины.

  3. Вы хотите, чтобы эта ширина была шириной содержимого самого широкого элемента списка.

  4. Вам также нужен способ равномерного распределения элементов списка по контейнеру, это кажется несовместимым с 3, потому что тогда они будут равномерно распределены не по содержимому, а по размеру контейнера.

Итак, я предполагаю, что вам нужны два разных решения.

Я думаю, ты можешь сделать

<style>
  ul, li{float:left;margin;padding:0;display:block;}
  li {clear:left;width:100%;margin:1px 0;background:#03a;}
</style>
<ul>
  <li>Item 1</li>
  <li>Item 2 which is longer</li>
  <li>Item 3</li>
</ul>

работает в некоторых браузерах. Кажется, я помню, что он не работал в IE и должен был заставить его работать с помощью выражений css.

Идея состоит в том, что ul и li плавают, чтобы сжать их до ширины содержимого. li очищаются и устанавливаются на 100% ширины их контейнера, тот же самый контейнер, который сжимается до их размера.

--

Ваш другой вариант невозможен в CSS, если вы не знаете количество элементов списка. Хотя, если вы не знаете количество элементов списка, это означает, что сценарии выполняются либо на стороне сервера, либо на стороне клиента, и вы можете узнать количество элементов. :)

В прошлом я решал эту проблему, давая ul класс с количеством дочерних элементов в нем, используя множество правил CSS и надеясь, что одно из них приживется.

eg

<style>
  ul.lis1 li {width:100%}
  ul.lis2 li {width:50%}
  ul.lis3 li {width:33.3%}
  ul.lis4 li {width:25%}
  /* ... you can keep going forever here, though there'll be a point at which they become too thin and your UI breaks anyway, */
</style>
<ul class="lis4"> <!-- lis4 is generated by PHP or Ruby or whatever -->
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>
person robotdana    schedule 16.08.2010

arrow_upward
1
arrow_downward

Используйте таблицы css с фиксированным макетом таблицы.

В результате каждый <li> разделяет равную часть <ul> независимо от того, сколько элементов в списке.

ul
{
    display: table;
    table-layout: fixed;
    width: 100%;
    border: 1px solid #c2c2c2;
    box-sizing: border-box;
}

li
{
    text-align: center;
    display: table-cell;
    border-right: 1px solid #c2c2c2;
}

Пример FIDDLE

person Danield    schedule 02.09.2013

arrow_upward
0
arrow_downward

Для этого вам нужно будет их плавать:

ul {
  list-style: none;
}

ul li {
  float: left;
  width: 100px; /* Or whatever arbitrary amount you want */
}

Список должен автоматически охватывать ширину контейнера — это блочный элемент.

person Yi Jiang    schedule 15.08.2010