ブロック属性を非ブロック要素に設定する

Question

以下の設定では、cssは完全に水平なメニューバーを生成するというトリックを行います。とにかく、その属性がブロック（アンカータグ）として設定されていても、第3グループのスタイルシートによれば、私は知りたいと思っています。なぜそれは本当にブロックとして振る舞いませんか？

私はほとんどのCSSチュートリアルから、ブロックは要素の前後に改行があることを知っているので、この場合、なぜ彼ら（すべてのアンカー）が同じ行の別のものの隣に配置されているのでしょうか。私はちょうど興味があり、理解したいと思う。

どのような説明をいただければ幸いです！

ul { 
    list-style-type: none; 
    height: 28px; 
    width: 100%; 
    margin: auto; 
} 

li { 
    float: left; 
} 

ul a { 

    background-repeat: no-repeat; 
    background-position: right; 
    padding-right: 10px; 
    padding-left: 10px; 
    display: block; 
    line-height: 28px; 
    text-decoration: none; 
    color: #FFFFFF; 
} 

あなたが左にフロートするように設定されている<li>を持っているHTML

<div id="menuBar"> 
    <ul> 
    <li><a href="/">Home</a></li> 
    <li><a href="/about">About</a></li>      
    </ul> 
</div> 

Answer 1

。アンカータグがあなたのliタグ内にあると思います。このルールを削除してください：

li { 
    float: left; 
} 

<a>はブロックレベルである必要があります。 <li>を左に浮かべるように設定すると、ブロック要素を互いの下でなく積み重ねるようにブラウザに指示します。

Answer 2

[OK]を、それぞれの<li>要素が左に浮いていることを確認しているため、実際にはラインに表示されている理由があります。 <a>のタグはブロック形式ですが、個々の文字は<li>個です。したがって、同じ<li>タグの中に複数の<a>タグを置くと、それらのタグは同じタグの上に重ねて表示されます。しかし、ブロック要素は単純に利用可能な幅の100％の幅を持ちます。したがって、この場合、それは<li>タグの幅です。これが他の要素がその下にプッシュダウンされない理由です。

編集

より良い例：

あなたはリスト項目は、あなたのCSSで、通常のリスト項目として表示したくないあなたの<ul>タグを語っています。次に、彼らはあなたの<li>要素を左に浮かべていることを伝えています。そして、あなたがそれらをクリアしていないので、スタック内の何かが、それらが入っているものの幅全体を占めるまで、スタック内で浮かせます。

したがって、それらはあなたのページの本文にあります。身体は800pxの幅を持ち、それぞれ<li>は200pxを占めています。行をドロップする前に、行の要素が4 <li>になります。

この場合、「ホーム」リンクと「アバター」リンクはそれぞれ、利用可能な領域の100％を占めるブロック要素であり、200pxです（<li>タグ）。これらは、（デフォルトで）含まれている要素の上部に垂直に配置され、インラインで表示されているかのように表示されます。

しかし、そうではありません。その幅は利用可能な200ピクセルに制限されているだけです。両方のリンクを同じ<li>要素内に配置した場合、各リンクは<li>要素の利用可能な幅の100％を占めるため、互いの上に積み重ねられていることがわかります。<a>タグは<li>要素内に含まれていなかったが、直接体内に、それは、利用可能な幅の100％であるように、その幅は、800ピクセル毎になり、それらが互いに上下に積み重ねることになる場合

。