Por que meu fundo de imagem desaparece no Float: à esquerda?

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

Pergunta

Quero criar um navbar com imagens em cada extremidade para torná -lo purty.

Então, eu criei o HTML e o CSS abaixo e funcionou muito bem. Meus itens de menu estão em uma lista UL/LI.

Quando estilizo a lista para colocar todos os itens em uma linha, as imagens nas extremidades desaparecem. O que há com isso? Como faço para consertar isso?

O culpado é flutuante: esquerda; abaixo de.

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

As imagens são diferentes para que o HTML/CSS possa ser copiado colado para testá -lo.

Qual é o problema? O que estou fazendo errado?

Foi útil?

Solução

Eu recomendo adicionar o excesso: oculto; (e zoom: 1; manter a compatibilidade do navegador cruzado para o IE6) à div contêiner em vez de adicionar uma divisão de compensação. Clear adiciona inchaço ao seu código -fonte.

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

Outras dicas

Com apenas crianças flutuadas, seu contêiner de saída retornará uma altura de 0px. Como tal, você pode colocar o seguinte imediatamente após o (s) elemento (s) flutuado:

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

E adicione as seguintes regras:

.clear { clear:both; }

Por exemplo:

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

Está acontecendo porque seus divs não têm altura. Você pode adicionar uma div vazia com clear: both Imediatamente após o seu UL. Ou você pode adicionar esses estilos a UL

width: 100%;
overflow: auto;

Ver isto para uma explicação.

Adicione a height: 28px; para o seu ul em seu CSS. Jonathan e Chetan já deram uma explicação muito boa de por que isso funciona, mas, para reiterar, os pais de elementos flutuados não são afetados pela altura de seus filhos flutuados.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top