Элемент HTML-списка: разделение родительской ширины на равные части

У меня есть родительский <ol> и пара элементов <li>.

<ol style='width=800px;display :block;float:left;'>
   <li style='display :block;float:left;'> Item 1  </li>
   <li style='display :block;float:left;'>  Item 2 </li>
   <li style='display :block;float:left;'>  Item 3 </li>
   <li style='display :block;float:left;'>  Item 4 </li> 
</ol>

Есть ли способ, которым мой элемент списка можно упорядочить таким образом, чтобы он равно разделил ширину родительского элемента (800 пикселей), и каждый элемент будет иметь такое же количество ширины? То есть каждый <li> будет иметь ширину 200 пикселей.

Я не хочу жестко задавать значение. Есть ли атрибут стиля, который будет делать это?

Я не хочу, чтобы hardocode шириной, как 20% или что-то, потому что элементы списка динамически добавлены. Это может быть 4 или 5 или 6 иногда

Ответы

Ответ 1

Попробуйте следующее: http://jsfiddle.net/QzYAr/

CSS

ol {
    width: 400px;
    /*width: 800px;*/

    display: table;
    table-layout: fixed; /* the magic dust that ensures equal width */
    background: #ccc
}
ol > li {
    display: table-cell;
    border: 1px dashed red;
    text-align: center
}

HTML:

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ol>

Ответ 2

Я думаю, это то, о чем вы просите. Это требовало jQuery.

http://jsfiddle.net/sKPLQ/3/

CSS

ul {
    width: 800px;
}

li {
    display: inline-block;
    float:left;
}

JS:

var evenWidth = $(".list").width()/$(".list li").size();
$(".list li").css("width", evenWidth);

HTML:

<ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

Ответ 3

Вот минималистский дизайн. Он будет создавать чувствительные ячейки с равным расстоянием

<style>
   div { border:1px solid red; width:400px; height:400px; }
   ul { width:100%; height:50px; list-style: none; margin:0; padding:0; text-align: center; }
   li { background-color:green; color:White; width:1%; position:relative; display:table-cell; border:solid 1px white; }
</style>

<div>
   <ul>
      <li>CELL 1</li>
      <li>CELL 2</li>
      <li>CELL 3</li>
      <li>CELL 4</li>
   </ul>
</div>

Магия width:1%; position:relative; display:table-cell;

Ответ 4

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

#menu {display: table-row;}
#menu li {display: table-cell;}

.., который будет имитировать поведение. Обратите внимание, что в IE это, как обычно, вызовет проблемы в более низких версиях.

Ответ 5

Обратите внимание: Оригинальный плакат редактировал свой вопрос, чтобы исключить проценты после того, как я разместил этот ответ.

Да, вам просто нужно выяснить процент, который каждый будет использовать. В этом случае 20%.

Кроме того, у вас есть небольшие проблемы с вашим HTML (отсутствующая цитата и width= вместо правильного width:).

<style>
    ol { width:800px;display :block;float:left; }
    li { border:1px solid black; display :block;float:left; width:20%; }
</style>
<ol>
   <li> Item 1  </li>
   <li>  Item 2 </li>
   <li>  Item 3 </li>
   <li>  Item 4 </li> 
</ol>

Update:

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

Не то, что я предлагаю вам использовать таблицы, но ячейки таблицы являются единственными элементами в HTML, которые ведут себя так, как вы просите.