如果您将父容器设置为 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(据我所知,也许你可以......)
那么你是如何做这些事情的呢?谢谢!
最佳答案
嘿,我想你想要这个,你可以像这样定义你的 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>
关于html - 拆分宽度 : 100% parent container into sections with decimals? 的最佳方法是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10274038/