Почему мой фон изображения исчезает на Float: слева?

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

Вопрос

Я хочу создать Navbar с изображениями на каждом конце, чтобы сделать его чистой.

Итак, я создал HTML и CSS ниже, и это работало отлично. Мои пункты меню находятся в списке UL/LI.

Когда я стиляю список, чтобы поместить элементы на одну строку, изображения на концах исчезают. Что с этим? Как это исправить?

Виновник плавает: слева; ниже.

--- 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 можно скопировать, чтобы проверить его.

В чем дело? Что я делаю не так?

Это было полезно?

Решение

Я бы порекомендовал добавить переполнение: скрыто; (и Zoom: 1; для поддержания совместимости Cross Browser для 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>

Это происходит, потому что у ваших DOV нет высоты. Вы можете добавить пустой дивинг с clear: both сразу после вашего UL. Или вы можете добавить эти стили в UL

width: 100%;
overflow: auto;

Видеть это для объяснения.

Добавить height: 28px; на ваш ul в вашем CSS. Джонатан и Четан уже дали очень хорошее объяснение того, почему это работает, но для того, чтобы повторить, родители плавающих элементов не страдают от высоты их плавающих детей.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top