html - 拆分宽度 : 100% parent container into sections with decimals? 的最佳方法是什么

Question

如果您将父容器设置为 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%。如果我想要一个 border-right: 1px solid black;你如何将这些因素与 CSS 结合起来？我能理解这都是数学，但你不能从百分比中减去 1px(据我所知，也许你可以......)

那么你是如何做这些事情的呢？谢谢!

Answer 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/