li float vs display：inline

Question

リストアイテムを水平に整列するには、float: leftまたはdisplay: inlineの中から最良の選択肢がありますか？

例：http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/

は個人的に私はfloatを嫌いますが、論理的ではなく、感情的なもののことかもしれないより。

Answer 1

ul { list-style-type: none; overflow: hidden; width:200px; } 
ul li { float:left; width: 100px; } 
ul li a { display: block; padding: 10px; width:80px; } 
ul li a:hover { background: black; } 


<ul> 
    <li><a href="http://www.facebook.com">Facebook</a></li> 
    <li><a href="httpt://www.google.com">Google</a></li> 
</ul> 

これはdisplay:inlineを使用するときに、レイアウトの目的のためにハンディキャップのあるマージンなどを...幅、パディング（上下）などのプロパティを設定することはできませんので、私はほとんどが好むものです。

EDIT 2014

またdisplay: inline-blockプロパティを使用するためのオプションです。リスト要素をインラインまたはインラインブロックにすると、空白が考慮されることに注意してください。したがって、要素間に不要なスペースが存在します。

ul { list-style-type: none; width: 300px; font-size: 0; } 
ul li { display: inline-block; *display: inline; zoom: 1; margin-right: 10px; } 
/* The *display and zoom is a IE hack, though can't remember 
    now which one (guess it is IE7) */ 
ul li a { display: inline-block; padding: 10px; font-size: 13px; } 

ここでfiddleを確認してください。

font-sizeプロパティ（ブラウザの互換性の問題）を使用しない場合は、HTMLコメントを使用して空白を取り除くこともできます。私は上記の方法を好むが。

<ul><!-- 
    --><li><a href="http://www.facebook.com">Facebook</a></li><!-- 
    --><li><a href="httpt://www.google.com">Google</a></li><!-- 
--></ul> 

Answer 2

LIのInline in chromeを表示する際にレンダリングの不具合が気付きました。私のLIボーダーは、適切な水平パディングでレンダリングされないことがあります。

一般的に、私はインラインが好きですが、それでも水平方向のマージンとパディングが得られます。 ULを使用し、垂直方向の間隔にはULを使用します。

私は浮動小数点を純粋に使用する傾向があります。なぜなら、LIはデフォルトでブロック要素であり、私の意見ではそのように扱われるべきだからですが、どちらにも明確な使用例があります。

li { 
     display:inline-block 
}; 

についてあなたは、その後など幅、heigth、パディング、マージン、などのプロパティを設定することができますどのような

Answer 3

..

Answer 4

それは個人的な好みです。

CSSポイントから、Display:Inline = Float:Left(Right)。
要素を水平にする場合は、<li>のようにします。

CSSルールFloatがDisplayより新しいです。