CSS：浮いのli要素

Question

にリストスタイルをキープ次に例を示します。

<ul> 
    <li>list</li> 
    <li style="float:left;">list</li> 
    <li style="float:left;">list</li> 
    <li style="float:left;">list</li> 
    <li style="float:left;">list</li> 
</ul> 

フロートを維持しながら、残りのLI要素のリストスタイルを保つためにどのように？

おかげで、ここで

Answer 1

もう少しプレイしたことがありますか？IEを使用していますか？また、クォーク・モードを避けるために、DOCTYPEを指定していますか？浮動小数点数と箇条書き箇条書きが奇妙な形で繰り越されている可能性があるIE6では、奇妙な動作がありました。

浮動小数点の場合、Internet Explorerがリストスタイルのタイプを壊すように見えます。それを元に戻すと、うまく動作します。マークアップについては、http://jsfiddle.net/gothick/VZC7F/5/を参照してください。それは私が見る限り、ブラウザ間で安全でなければなりません。

インラインスタイルを使用して完全な例：

<ul>  
    <li>list</li> 
    <li style="float:left; margin-left: 20px; list-style-type: square;">list</li>  
    <li style="float:left; margin-left: 20px; list-style-type: square;">list</li>  
    <li style="float:left; margin-left: 20px; list-style-type: square;">list</li>  
    <li style="float:left; margin-left: 20px; list-style-type: square;">list</li> 
</ul> 

...もちろん私のjsFiddle例のように、非インラインスタイル/スタイルシートを使用する方が効率的でしょうけれども。

私の例はIE8で動作します。それはthe bullets might have disappeard in a more fundamental way in earlier version of IEのように見えます。この記事では、動作を説明し、再作成の方法を示していますが、迷惑な回避策があります（基本的には、背景イメージで不足している箇条書きを再作成します）。

Answer 2

<ul> 
    <li>list</li> 
    <li style="float:left; clear: left;">list</li> 
    <li style="float:left; clear: left;">list</li> 
    <li style="float:left; clear: left;">list</li> 
    <li style="float:left; clear: left;">list</li> 
</ul> 

Answer 3

は）私が思い付くことができるもののjsfiddle demoです。彼らは最初のものを除いてすべて浮いており、正方形を維持しています。