HTML List元素：将父级宽度分成相等的部分

小编典典

HTML List元素：将父级宽度分成相等的部分

css

我有一个父母<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>

有什么办法可以将我的列表项以均等划分父级宽度（800px）的方式排列，并且每个项目都具有相同的宽度？即每个<li>将采取200px宽度。

我不想对值进行硬编码。是否有任何样式属性可以做到这一点？

我不想对20％之类的宽度进行硬编码，因为列表项是动态添加的。有时可能是4或5或6

阅读 299

2020-05-16

共1个答案

小编典典

有关详细信息display: table-cell：在div上使用display：table-cell`是否有缺点？
[table-layout: fixed确保li元素的宽度相等。

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>

2020-05-16