<li> элементов с адаптированной шириной - PullRequest
Новая
       25

<li> элементов с адаптированной шириной

6 голосов
/ 19 ноября 2011

Мне интересно, возможно ли это сделать в CSS без JavaScript:

Список из N <li> элементов с отображением на экране, равной ширине и шириной всех элементов, равных ширине контейнера

У меня может быть 3 <li> предметов, в этом случае ширина <li> будет составлять 33%, или у меня может быть 4 <li> предметов, тогда ширина li будет 25%.

Ответы [ 5 ]

4 голосов
/ 15 марта 2012

Это идеальный пример для использования display: table.Работает в современных браузерах и IE8 + ...
Диаграмма поддержки
JSFiddle

css: 

ul {
    display: table;
    width: 100%;
    table-layout: fixed; /* optional, for equal spacing */
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    vertical-align: middle; /* or similar, if needed */
}

html: 

<ul>
   <li>foo</li>
   <li>bar</li>
   <li>baz</li>
</ul>
2 голосов
/ 19 ноября 2011

Это возможно с CSS3 flex box , как показано в этой скрипке (только для браузеров webkit). Есть другие пользовательские свойства браузера , которые бы работали в последних версиях Firefox и IE. Если вам нужно что-то, что работает для Opera или более старых версий IE, тогда есть библиотека JavaScript с именем Flexie , которая может работать.

Кредит Гибкая структура коробки CSS3 (flexbox) для получения информации о поддержке браузера.

HTML 

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

CSS 

ul {
    display:-webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack:justify;
    width:200px;
}

li {
    -webkit-box-flex:1;
    border:1px dashed grey;
    text-align:center;
}
0 голосов
/ 20 января 2012

Создайте стандартный плавающий влево список, и вы можете (или должны) настроить отображение на встроенное, чтобы избежать дублирования IE6, возможно, существующего поля слева.

Если у вас есть статическая страница, вы можете установить свой списокпримерно так:

HTML: 

<ul class="listLR col3 clearfix">
  <li></li>
  <li></li>
  <li></li>
</ul>

и CSS: 

listLR {
  width: 100%; // important for IE!
}

listLR > li {
  display: inline;
  float: left;
}

col3 > li {
  width: 33.33%;
}
col4 > li {
  width: 25%;
} //and so on

Использование класса clearfix продемонстрировано здесь

0 голосов
/ 19 ноября 2011

Предполагая, что li сгенерированы из некоторого серверного кода, вы можете использовать следующий "трюк": 

// in the markup add a class to the UL based on the count of messages
<ul class="col<%= echo count(lis) %>">
...

// and in the CSS
// (notice you have to use display: inline-block, as inline doesn't allow you to
// specify a width)

li { display: inline-block; }
.col3 li { width: 33.3%; }
.col4 li { width: 25%; }
// etc
0 голосов
/ 19 ноября 2011

Вы могли бы, с ограниченным количеством возможностей.В CSS3 вы не можете сделать это для произвольного числа столбцов.Вы можете быть в состоянии в CSS4;Я еще не знаю. 

li {
    display: inline;
}

/* 1 column */
li:first-child:last-child {
    width: 100%;
}

/* 2 columns */
li:first-child:nth-last-child(2),
li:nth-child(2):last-child {
    width: 50%;
}

/* 3 columns */
li:first-child:nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):last-child {
    width: 33.3333%;
}

/* 4 columns */
li:first-child:nth-last-child(4),
li:nth-child(2):nth-last-child(3),
li:nth-child(3):nth-last-child(2),
li:nth-child(4):last-child {
    width: 25%;
}

Надеюсь, вы поняли идею.Вы хотите сделать это?Я надеюсь, что нет.

...