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

Question

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

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

Answer 1

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

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 плавают, чтобы уменьшить их до ширины содержимого. Ли очищаются и устанавливаются на 100% ширины их контейнера, того же контейнера, который уменьшен до их размера.

-

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

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

например

<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>

Answer 2

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

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

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

Answer 3

Для этого вам понадобится разместить их:

ul {
  list-style: none;
}

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

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