nowrap项目溢出其框

Question

通过nowrap和list条目获得一些奇怪的行为。如何在chrome中正确地将填充应用于“测试123”li？(来自测试123的"3“在定义的宽度之外并且侵占填充物)。

本质上，我试图实现的是ul将与最宽的li一样宽，因此使用了float: left。但同时我希望保留虚线边框，填充和保持每个项目的文本在同一行上，因此使用空格: 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时，它需要计算实际应该提供多少填充，但随后发现它不能，因为它们的父对象上没有宽度信息。

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

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

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

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

li {
    padding: 1ex 1em;
}

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

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

Answer 2

将width:100%;添加到"li“样式将解决您的问题。原因是，"li“元素有一个"10”的左边距，但是边框是用文本的确切宽度绘制的。那么看起来文本就溢出了。