分割宽度的最佳方法是什么：100% 父容器分成带小数的部分？答案

【问题标题】：What's the best way to split a width: 100% parent container into sections with decimals?分割宽度的最佳方法是什么：100% 父容器分成带小数的部分？
【发布时间】：2012-05-03 16:20:02
【问题描述】：

如果您将父容器设置为 width: 100% 并且您的部分中的所有部分都应该相等，但百分比是奇数，例如 16.666667%，您如何确保它正确显示而没有中断?小数位数的限制是多少？

示例：你有

<ul>
     <li>One
     <li>Two
     <li>Three
     <li>Four
     <li>Five
     <li>Six
</ul>

ul 的宽度为 100%，所有的 li 都向左浮动。现在将 100 除以 6，得到 16.66666666667%。如果我想要一个右边框：1px 纯黑色；你如何在 CSS 中考虑这些因素？我可以理解这都是数学，但你不能从百分比中减去 1px（据我想象，也许你可以......）

那么你是怎么做这些事情的呢？谢谢！

【问题讨论】：

如果你在看那种精度，我认为 css 不适合你..
这些事情很痛苦，尤其是如果您考虑到填充和边框等因素。使用 CSS 并不能真正获得良好的精度。它必须是 css2 兼容的，还是你可以使用 css3 灵活的盒子布局？
我可以使用 css3。这就是我现在正在使用的。我想让它免费使用javascript。并不是说我反对 javascript，但我不是最好的，所以编写自定义代码来做我想做的事情并不像在 css 中那样理想。
我的解决方案是在每个元素周围添加一个 div。在我的示例中，我实际上并没有使用 ul，但我认为这是最好的表示，老实说，我忘记了我没有使用列表。所以我有
1

2
...
6
然后将div的宽度全部设为16.666666666666667%。我仍然不知道极限，但我不能说出任何问题，也没有多余的空间。这个解决方案的好处是现在可以在 p i 上添加尽可能多的边框大小、填充等，而不会影响 div 父容器。如果没有所有强大的“正确”盒子模型，这不会成为问题，但我们会得到我们想要的。 flex box 不是完全兼容的，仍然需要一个后备，这会让我处于相同的位置。

标签： html css width percentage

【解决方案1】：

嘿，我想你想要这个，你可以定义你的 ul display:table 并将你的 ul li 定义为 display:table-cell;，就像这样

CSS

div{
width:500px;
    border:solid 1px red;
    margin:0 auto;

}

ul{
width:100%;
    background:green;
    display:table;

}

ul li{
display:table-cell;
    border-right:solid 1px white;
    padding:10px;
}
ul li:last-child{border:none;}

HTML

<div>
<ul>
    <li>One</li>
     <li>Two</li>
     <li>Three</li>
     <li>Four</li>
     <li>Five</li>
     <li>Six</li>
</ul>
</div>

现场演示http://jsfiddle.net/rohitazad/gjutz/1/

【讨论】：