1

私はul次の構造を持っています

<ul>
    <li> text goes here <span></span> </li>
    <li> text goes here <span></span> </li>
</ul>

現在、最初は span タグは空です。jQuery関数を使用してスパンタグに数字を追加しようとしてい.html()ますが、うまくいきますが、Chromeではテキストが途切れます。奇妙なことに、Web インスペクターを使用して li をクリックすると、コンテンツと li に応じてスパン タグの幅が増加します。

何か案は ？

cssは以下の通り

li{
    list-style:none;
    float:left;
    padding: 0 5px;
}

span{
    display:inline-block;
    min-width:5px;
    min-height:5px;
}
4

2 に答える 2

2

できません。span要素ですinline。表示プロパティをinline-blockまたはblockに設定するか、 のblock代わりに 要素を使用しspanます。

white-space: nowrap; // will force it not to wrap around

このフィドルの効果を参照してください: http://jsfiddle.net/Abp8y/11/ [更新]。

最終診断: text-transform li タグにバグが見つかりました。削除text-transformすると問題が解決します。

Chrome のバグについては、こちらでも説明しています: text-transform: uppercase cause layout error on Chrome (@Christoph が投稿)

于 2012-07-04T06:47:01.590 に答える
0

使用してこれを試して、スパンの幅を修正できます-

span{
  word-wrap:break-word;
}
于 2012-07-04T06:46:14.423 に答える