html - CSS テーブルと list-style-position のバグ? 回避策

Question

と の順序付けられていないリストがdisplay: table;ありlist-style-position: inside;ます。問題は Google Chrome にあります。リスト項目は全幅を占有せず、代わりに次の行に折り返されます。

http://jsfiddle.net/ntbq5/

面白いことに、これが常に起こるとは限らないので、私が話していることがわからない場合は、[実行] ボタンをクリックしてみてください。

フィドルを更新すると、どういうわけか再び正常に表示されます... http://i40.tinypic.com/30hr4gl.gif . Firefox と IE も正常に表示されます。しかし、実際の Web サイトでは、更新しても何も変わりません。解決策は何ですか？

編集：悪いことに、テーブルも中央に配置する必要があると言うのを忘れていたので、100％幅を使用することはできませんhttp://jsfiddle.net/ntbq5/10/他に何ができますか？

Answer 1

おそらく、li 要素の幅を定義するだけです。

li {
    width: 150px;
}

これを追加したフィドルの画面は次のとおりです。

http://jsfiddle.net/ntbq5/embedded/result/

Answer 2

<ul>要素に幅 100% を追加できます。

CSS:

ul {
   display: table;
   width: 100%;
   list-style-position: inside;
}