html - nowrap 元素溢出它的盒子

Question

使用 nowrap 和列表项会出现一些奇怪的行为。如何让填充在 chrome 中正确应用于“Testing 123”li？ (测试 123 中的“3”超出了定义的宽度并侵占了填充)。

基本上我想要实现的是 ul 将与最宽的 li 一样宽，因此使用 float: left。但与此同时，我想保留虚线边框、li 填充并将每个元素的文本保持在同一行，因此 white-space: nowrap。

HTML:

<ul>
    <li>Some</li>
    <li>Content</li>
    <li>Testing 123</li>
</ul>

CSS:

ul {
    float: left;
    padding: 0;
    margin: 0;
}

li {
    padding: 10% 15%;
    border-bottom: 1px dashed #333;
    list-style-type: none;
    white-space: nowrap;
    font-size: 2em;
}

http://jsfiddle.net/T9emf/2/

Answer 1

好的，从评论延伸:

根本问题在于，您的 ul 是自动调整宽度的，但是您的 li 使用百分比填充，所以当浏览器开始渲染 li ，它需要计算应该提供多少实际填充，但后来发现它不能，因为它们的父级没有宽度信息。

在这个 fiddle 上:http://jsfiddle.net/T9emf/3/ ，使用 Chrome DevTools 反复打开和关闭 display:inline-block 和 width:auto 并观察 li 的大小。这样做的原因是因为浏览器不能直接决定应该提供多少填充，它可能稍后尝试决定，所以每当布局改变时，li 可能会移动。

要解决此问题，一种可能的方法是为 li 提供绝对填充，如下所示:

http://jsfiddle.net/T9emf/4/

ul {
/*    float: left;*/
    display:inline-block;
}

li {
    padding: 1ex 1em;
}

调整填充值以满足视觉最佳点。

em 的优点是它可以很好地放大和缩小，因为它是绑定(bind)到字体大小的百分比单位。