Warum verschwinden mein Bildhintergrund im Float: Links?

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

Frage

Ich möchte eine Marine mit Bildern an jedem Ende erstellen, um sie purty zu machen.

Also habe ich die HTML und CSS unten erstellt und es hat großartig funktioniert. Meine Menüpunkte befinden sich in einer UL/Li -Liste.

Wenn ich die Liste stile, um die Elemente in einer Zeile zu setzen, verschwinden die Bilder an den Enden. Was ist damit? Wie repariere ich es?

Der Schuldige ist float: links; unter.

--- 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;
}

Die Bilder sind unterschiedlich, sodass das HTML/CSS kopiert werden kann, um sie zu testen.

Was ist das Problem? Was mache ich falsch?

War es hilfreich?

Lösung

Ich würde empfehlen, Überlauf hinzuzufügen: versteckt; (und Zoom: 1; Um die Querbrowserkompatabilität für IE6 aufrechtzuerhalten) zum Container -Div, anstatt eine Clearing Div hinzuzufügen. Clear fügt Ihrem Quellcode Aufblähung hinzu.

#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.
}

Andere Tipps

Mit nur schwebenden Kindern gibt Ihr Outter Container eine Höhe von 0PX zurück. Daher können Sie Folgendes unmittelbar nach dem schwebenden Element (en) platzieren:

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

Und fügen Sie die folgenden Regeln hinzu:

.clear { clear:both; }

Zum Beispiel:

<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>

Es passiert, weil Ihre Divs keine Größe haben. Sie können ein leeres Div mit hinzufügen clear: both Unmittelbar nach deiner UL. Oder Sie können diese Stile zu UL hinzufügen

width: 100%;
overflow: auto;

Sehen Dies für eine Erklärung.

Füge hinzu ein height: 28px; zu deinem ul in deinem CSS. Jonathan und Chetan haben bereits eine sehr gute Erklärung gegeben, warum dies funktioniert, aber um zu wiederholen, sind Eltern von schwebenden Elementen nicht von der Höhe ihrer schwebenden Kinder betroffen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top