CSS：如何在li之间进行填充？

我有以下简单的HTML。CSS：如何在li之间进行填充？

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

和CSS：

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

我要让所有的<li>具有相同的填充右，使所有<li>的宽度和padding-左派的总和等于<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来做到这一点吗？

谢谢。

来源

2015-09-25 Cheung Brian

你为什么不使用带有代替列的表？一个更简单的解决方案 – Lee

我相信填充左是不是去这里的方式。你确定你不想在'li'上使用'text-align：right;'和'flex-grow：1;'？也许你需要指定你想实现的内容，而不是限制我们使用填充左边。 – opatut

@Lee - 因为它不是表格数据 – Quentin

你有没有尝试过这样的：

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

来源

2015-09-25 10:37:12

谢谢。我想我需要更多关于弹性盒的知识。谢谢你的杰出答案。 –

你可以这样做一个：

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

演示代码Fiddle

来源

2015-09-25 10:39:50

为什么你提出了同样的解决方案？ –

先生，我已经发布了答案，但我的网络非常缓慢，所以现在只发布了@ LuisP.A。 –

但都有不同的代码和不同的小提琴。 – akash

除了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>

来源

2015-09-25 10:53:24

CSS：如何在li之间进行填充？

回答

相关问题