auto expand и space out li items

Итак, скажем, у меня есть div размером 780 пикселей, в нем 6 элементов списка.auto expand и space out li items

Эти элементы могут варьироваться от 10px до 130px.

Я бы хотел, чтобы элементы списка использовали весь 780px и равномерно распределяли их с помощью поля (автоматически, конечно).

Я попробовал таблицу, но не сохранил первоначальную ширину списка.

HTML

<ul class="foo"> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
<li>6</li> 
</ul>

CSS

.foo{ 
    display:table; 
    table-layout:fixed; 
} 
.foo li{ 
    padding:5px; 
    display:table-cell; 
}

источник

2014-11-26 Mathew

Это 'flexbox' решение. http://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

Рассмотрите CSS3 'box-sizing', который включает в себя margin и padding - здесь есть аналогичный вопрос http://stackoverflow.com/ вопросы/2434602/css-setting-width-height-as-percent-minus-pixels Здесь вы можете увидеть поддержку браузера http://caniuse.com/#feat=css3-boxsizing – jan199674

Что вы ищете, чтобы установить их в качестве display: flex; для маркированного списка.

ul.foo { 
 
    display: flex; 
 
} 
 

 
ul.foo li { 
 
    display: inline-block; 
 
    flex: 1; 
 
    text-align: center; 
 
}

<ul class="foo"> 
 
<li>1</li> 
 
<li>2</li> 
 
<li>3</li> 
 
<li>4</li> 
 
<li>5</li> 
 
<li>6</li> 
 
</ul>

источник

2014-11-26 22:38:45 bigal

Там всегда старый метод школы, а также, изложенные ниже. Но гибкая поддержка набирает (http://caniuse.com/#search=flex)! Поэтому, если вы можете пойти по этому маршруту, это то, что я бы выбрал.

ul.foo { 
 
    width: 780px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none outside; 
 
} 
 

 
ul.foo li { 
 
    width: 16.66%; 
 
    float: left; 
 
    outline: 1px solid green; 
 
}

<ul class="foo"> 
 
<li>1</li> 
 
<li>2</li> 
 
<li>3</li> 
 
<li>4</li> 
 
<li>5</li> 
 
<li>6</li> 
 
</ul>

источник

2014-11-26 22:53:22

auto expand и space out li items

ответ

Смежные вопросы