なぜ私の画像の背景がフロートで消える：左？

StackOverflow https://stackoverflow.com/questions/2062134

質問

両端に画像を備えたNavbarを作成して、純粋にしたいと思います。

そこで、以下にHTMLとCSSを作成しましたが、うまくいきました。私のメニュー項目はUL/LIリストにあります。

リストをスタイリングしてアイテムをすべて1行に配置すると、端の画像が消えます。どうしたの？どうすれば修正できますか？

犯人はフロートです：左;下。

--- test.html ---

<html>
<head>
    <link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
    <div id="container">
        <div id="header-usernav" class="span-6 last large">
            <div id="header-usernav-leftside"><div id="header-usernav-rightside">
                <ul>
                    <li>Register</li>
                    <li>Signin</li>
                    <li>Signout</li>
                </ul>
            </div></div>
        </div>
    </div>
</body>
</html>

--- test.css ---

#container #header-usernav {
    background: url('http://www.webcredible.co.uk/i/bg-i-resources.gif');
    height: 28px;
    background-repeat: repeat;
}
#container #header-usernav-leftside {
    background: url('http://www.webcredible.co.uk/i/nav-l-h.gif');
    background-position: top left;
    background-repeat: no-repeat;
}
#container #header-usernav-rightside {
    background: url('http://www.webcredible.co.uk/i/nav-r-h.gif');
    background-position: top right;
    background-repeat: no-repeat;
}

#container #header-usernav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 10px;
}

#container #header-usernav li {
    float: left;
    padding: 0;
    margin: 0 0.2em;
}

画像が異なるため、HTML/CSSをコピーしてテストすることができます。

どうしたんだ？私は何が間違っているのですか？

役に立ちましたか？

解決

Overflow：Hiddenを追加することをお勧めします。 （およびズーム：1; IE6のクロスブラウザ互換性を維持するには、クリアリングDIVを追加するのではなく、コンテナDIVに維持します。クリアは、ソースコードに膨張を追加します。

#container #header-usernav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 10px;
    overflow: hidden;
    zoom: 1;
    height: 28px; /* This is needed to ensure that the height of the rounded corners matches up with the rest of the bg.
}

他のヒント

浮かんでいる子供のみで、外の容器は0pxの高さを返します。そのため、フローリングされた要素の直後に以下を配置できます。

<div class="clear"></div>

次のルールを追加します。

.clear { clear:both; }

例えば：

<div id="container">
    <div id="header-usernav" class="span-6 last large">
        <div id="header-usernav-leftside">
          <div id="header-usernav-rightside">
            <ul>
                <li>Register</li>
                <li>Signin</li>
                <li>Signout</li>
            </ul>
            <div class="clear"></div>
          </div>
        </div>
    </div>
</div>

あなたのdivには高さがないので、それは起こっています。空のdivを追加できます clear: both ULの直後。または、これらのスタイルをULに追加することもできます

width: 100%;
overflow: auto;

見る これ 説明のために。

Aを追加します height: 28px; あなたに ul あなたのCSSで。ジョナサンとチェタンは、これがなぜ機能するのかについて非常に良い説明をすでに与えていますが、浮かんだ元素の親は、浮遊した子供の高さの影響を受けません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top