1

その 5 が 2 番目の行で下に移動する原因は一体何なのでしょうか? 他のリスト項目にはより多くの文字が含まれており、「Foo Fighters」に番号を追加して、int 文字が原因であるかどうかを確認し、正常に表示されました。

インライン リストのスナップショットでは、テキスト Maroon 5 が 2 行に分割されています。

<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/を参照)。

ただし、これを防ぐべきことの 1 つはwhite-space: nowrap;、「#soundsLike li」スタイルを適用することです。

于 2013-07-25T22:24:25.547 に答える