1

到底是什么原因导致那 5 下移到第二条线上?其他列表项有更多字符,我什至在“Foo Fighters”中添加了一个数字,只是为了看看它是否是由一个 int 字符引起的,它应该显示出来。

内联列表的快照,文本 Maroon 5 被分成两行。

<ul id="soundsLike">
    <li>Foo Fighters</li>
    <li>Maroon 5</li>
    <li>Paramore</li>
    <li>Jimmy Eat World</li>
    <li>none of these</li>
</ul>

CSS

#soundsLike {
    list-style: none;
    margin:0px;
    padding:0px;
}
#soundsLike li {
    display: inline-block;
    padding:3px 5px;
    background:#57A957;
    text-align: center;
    color:#000;
    font-size:80%;
    line-height:14px;
}
4

1 回答 1

3

该代码本身没有该问题(请参阅:http: //jsbin.com/avufay/1/),因此必须有其他影响它的东西。

应该防止这种情况发生的一件事是white-space: nowrap;采用“#soundsLike li”样式。

于 2013-07-25T22:24:25.547 回答