0

Getting some strange behaviour with nowrap and list items. How do I get the padding to apply to the "Testing 123" li properly in chrome? (The "3" from testing 123 is outside the defined width and encroaches on the padding).

Essentially what I'm trying to achieve is that the ul will be as wide as the widest li, hence the use of float: left. But at the same time I want to keep the dashed border, li padding and keep the text of each item on the same line, hence 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/

4

2 回答 2

2

好的，从评论延伸：

根本问题是，你ul是自动宽度的，但你li的 s 使用百分比填充，所以当浏览器来渲染时li，它需要计算应该给出多少实际填充，但后来发现它不能，因为有他们的父母没有宽度信息。

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

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

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

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

li {
    padding: 1ex 1em;
}

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

好处em是它可以很好地放大和缩小，因为它是一个绑定到字体大小的百分比单位。

于 2013-06-15T02:59:59.723 回答
0

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

于 2013-06-13T10:30:48.377 回答