2

私は数週間前にHTMLとCSSを使い始めましたが、これは何度か起こりましたが、その理由はわかりません。

親要素に背景を適用し、それに何かを含めることがありheightますが、親のは子0を受け取る代わりに残りますheight。そして時々それはします（私はそれが正しい振る舞いであるはずだと私は信じていますか？）

私のglossarySelectorは0高さを取得します。そのため、背景色が表示されません。

.glossarySelector {
  background: #EFEFEF; 
}

<div class="glossarySelector">
  <ul>
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
    <li><a href="#">E</a></li>
  </ul>
</div>

なんで？

あなたはここで完全なコードを見ることができます。

4

5 に答える 5

3

編集：このSOの回答は、この問題を解決するいくつかの方法を提供し、それぞれに長所と短所があります：https ://stackoverflow.com/a/1633170/388916

子がない場合、または子が使用position: absoluteまたはフローティングを使用してページフローから削除されている場合、要素は完全にフラット（高さ0px）です。リスト要素にはすべて、glossarySelector内に高さを拡張するfloat: left要素がないためです。

「clearFix」というクラスを作成したようです。フローティングの問題を修正するには、 glossarySelectordiv内にそのクラスのdivを追加するだけです。

<div class="glossarySelector">
    <ul>
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
        <li><a href="#">E</a></li>
    </ul>
    <div class="clearFix"></div>
</div>

フィドル： http： //jsfiddle.net/gTKNk/12/

于 2012-10-30T12:59:36.460 に答える
1

あなたはglossarySelectorで「clearfix」を使うことができます。

.glossarySelector
{
     background: #000;
     overflow: hidden;
}

「clearfix」のどのメソッドを使用できますか？を参照してください。代替のclearfixメソッド。

于 2012-10-30T12:59:10.090 に答える
0

「overflow：hidden」は、この問題を修正するトリックです。お役に立てれば。

.glossarySelector
    {
    background-color: #ff0000;
    overflow:hidden;
    }

ここの例。

この回答は、明確な修正に関するすべてを説明しています。

于 2012-10-30T13:03:06.537 に答える
0

それはfloat: leftリストアイテムにあるからです<li>

あなたはこれを行うことができます：

.glossarySelector {
  background: #EFEFEF;
  overflow: hidden;
}

またはクリアフィックスを追加します

于 2012-10-30T13:05:44.830 に答える
-2

divのデフォルトの表示モードは「ブロック」であり、すべての場合にそのコンテンツをラップアラウンドするわけではありません。追加する必要がありますdisplay: inline-block;

left: 30pxあなたのコードでは、ul要素のためにリストはまだ右側でオーバーラップしていますが、それを置き換えるか、margin-left:30px;またはpadding-left:30px;それを置き換えるとうまくいきます;）

于 2012-10-30T13:02:35.887 に答える