Perché lo sfondo della mia immagine scompare al galleggiante: a sinistra?

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

Domanda

Voglio creare una barra di navigazione con immagini su ciascuna estremità per renderlo puro.

Quindi, ho creato HTML e CSS di seguito e ha funzionato alla grande. Le mie voci di menu sono in un elenco UL/LI.

Quando sto modellando l'elenco per mettere gli elementi tutti su una riga, le immagini alle estremità scompaiono. Cosa succede con quello? Come lo aggiusto?

Il colpevole è galleggiante: a sinistra; sotto.

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

Le immagini sono diverse in modo che l'HTML/CSS possa essere copiato incollato per testarlo.

Qual è l'accordo? Che cosa sto facendo di sbagliato?

È stato utile?

Soluzione

Consiglierei di aggiungere overflow: nascosto; (e zoom: 1; per mantenere la compatibilità del browser incrociato per IE6) al Div del contenitore anziché aggiungere un div di cancellazione. Clear aggiunge gonfiore al codice sorgente.

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

Altri suggerimenti

Con solo bambini galleggiati, il tuo contenitore esterno restituirà un'altezza di 0px. Pertanto, puoi posizionare quanto segue immediatamente dopo gli elementi galleggiati:

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

E aggiungi le seguenti regole:

.clear { clear:both; }

Per esempio:

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

Sta succedendo perché i tuoi div non hanno altezza. Puoi aggiungere un div vuoto con clear: both Immediatamente dopo il tuo UL. Oppure puoi aggiungere questi stili a UL

width: 100%;
overflow: auto;

Vedere questo per una spiegazione.

Aggiungere un height: 28px; alla tua ul Nel tuo CSS. Jonathan e Chetan hanno già dato un'ottima spiegazione del perché funziona, ma per ribadire, i genitori di elementi galleggiati non sono influenzati dall'altezza dei loro bambini galleggiati.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top