Question

我有以下简单的HTML。

<div>
   <ul>
     <li>A</li>
     <li>B</li>
     <li>C</li>
   </ul>
</div>

和CSS：

ul { width: 100%; display: flex; flex-direction: row };

我想让所有<li>具有相同的填充权限，以便所有<li>的宽度和填充左边的总和等于<ul>，如下所示：

Total ul length: 100px;
(1st li's width + 1st li's padding-left) +
(2nd li's width + 2nd li's padding-left) +
(3rd li's width + 3rd li's padding-left) == 100px;

这样3 <li>的填充左边是相等的。

我可以在没有javascript的情况下使用纯CSS吗？

谢谢。

Answer 1

你试过这个：

<强> CSS

ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
ul li {
    -webkit-flex: 1 auto;
    flex: 1 auto;
}

<强> DEMO HERE

Answer 2

你可以这样做：

ul li{ -webkit-flex: 1 auto; flex: 1 auto; }
ul {display: -webkit-flex; display: flex;}

演示代码Fiddle

Answer 3

除了flex之外，您还可以尝试使用CSS表格。

在display: table-cell元素上设置li，如果width: 33.3333%元素的宽度相同，则添加li。

请注意，在这种方法中，您会丢失列表项上的项目符号/制造商，这可能是您需要的。

ul {
  width: 100px;
  border: 1px dotted gray;
  display: table;
  margin: 0;
  padding: 0;
}
ul li {
  display: table-cell;
  border: 1px dotted blue;
  text-align: right;
  width: 33.33333%;
}

<ul>
  <li>A</li>
  <li>Bb</li>
  <li>Ccc</li>
</ul>

CSS：如何在li之间制作填充权？

3 个答案: