web-dev-qa-db-ja.com

li float対display：インライン

リストアイテムを水平方向に配置するためのfloat: leftまたはdisplay: inlineからの最良の選択はありますか？

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

個人的に私はfloatが嫌いですが、それは論理的というよりも感情的なもののほうが多いかもしれません。

csshtml-lists
18
Jamie Kitson
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プロパティを使用するオプションもあります。注意すべきことの1つは、リスト要素をインラインまたはインラインブロックにすると、空白が考慮されることです。したがって、要素間に不要なスペースができます。

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>
15
Savas Vedova

どうですか

li {
       display:inline-block
};

次に、幅、高さ、パディング、マージンなどのプロパティを設定できます。

9
Chris Pesoa

LIのインラインをChromeで表示すると、いくつかのレンダリングバグに気づきました。 LIボーダーが適切な水平パディングでレンダリングされない場合があります。

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

LIはデフォルトではブロック要素であり、私の意見ではそのように扱う必要があるため、純粋にfloatを使用する傾向がありますが、両方に明確な使用例があります。

2
user2708862

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

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

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

0
Scott