Question

使用nowrap和列表项获取一些奇怪的行为。如何在chrome中正确应用填充“Testing 123”li？（来自测试123的“3”超出了定义的宽度并侵占了填充物。）

基本上我想要实现的是ul将与最宽的li一样宽，因此使用float：left。但同时我想保留虚线边框，li填充并保持每个项目的文本在同一行，因此白色空间：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可能会改变。

要解决这个问题，一种可能的方法是给li s绝对填充，如下所示：

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

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

li {
    padding: 1ex 1em;
}

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

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

Answer 2

将width:100%;添加到＆＃34; li＆＃34;的样式中将解决您的问题。原因是，＆＃34; li＆＃34;元素有一个＆＃34; 10＆＃34;左边填充，但边框是用文本的确切宽度绘制的。然后它看起来像文本溢出。

nowrap项目溢出其框

2 个答案: