インラインブロックとリスト内のブロック

Question

私はCSSに関する初心者ですが、チュートリアルでは完全に失われました。 私が知る限り、ブロック要素は全体の行を取ります。また、インライン要素は要素の幅と高さだけをとり、インラインブロックはインライン要素のように機能しますが、ここでは幅と高さを設定できます。

さて、今質問します。チュートリアルでは、順不同のリストを作成します。

header nav ul li { 
display: inline-block; 
padding: 0; 
} 

リストには5つの要素があります。要素のうち4つは「メニュー」、「お問い合わせ」などのテキストですが、リストの1つの要素はロゴ画像にする必要があります。今のロゴを追加するために、私はこれを実行する必要があります。

は

header nav ul li#logo a:link { 
display: block; 
width: 300px; 
height: 260px; 
background: url('images/logo.png') center center no-repeat; 
} 

しかし、私は得ることはありませんが、私は第1のセンスの原因は、私は次のためにそれらをたくなるこれ（インラインブロック要素には、リスト内の要素を作ることですお互いに1つの画像があります。）しかし、なぜ私はロゴイメージを含む要素をリスト要素にブロック要素にする必要がありますか？まず第一に、それは全体の行を占めると思った（要素はまだ隣り合っています）。そして第二に、リストの要素をインラインブロック要素に変換しましたか？答えを知っている人は誰ですか？

Answer 1

アンカーがdisplay:blockがli自体に直接ではなく... li内にあるanchorに設定されているdisplay: block

1-持っなぜ以下のいくつかの点を考慮すると、それを取得する必要があります。あなたがblockないli自体に内部の内部要素のいずれかを変更したため、そのそれでも隣同士にすべてliを示す理由

厥。アンカーの

2 - デフォルトdisplayプロパティには、これはあなたがwidthとheight上のコントロールを持っていないことを意味します... inlineです。

3- anchor内background-imageを表示することができるように、あなたは、特定のwidthとheightを設定する必要があり、表示がところで、あなたをwidthとheight

を制御することができるようにblockへinlineからできる変更された理由のthatsますまた、アンカーでinline-blockを使用しても動作します。