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.

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

Вы должны будете плавать их за это:

ul { 
    list-style: none; 
} 

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

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

Answer 3

Используйте 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; 
} 

Example FIDDLE