Почему делают мой фон изображения исчезает на плавании: левый?
Я хочу создать navbar с изображениями на каждом конце для создания этого purty.
Так, я создал HTML и CSS ниже, и он работал отлично. Мои пункты меню находятся в списке ул./лития.
Когда я разрабатываю список для помещения объектов все на одну строку, изображения на концах исчезают. Что произошло с этим? Как я фиксирую его?
Преступник является плаванием: оставленный; ниже.
---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>
---тест. 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 может быть скопирован вставляемый для тестирования его.
Каково соглашение? Что я делаю неправильно?
4 ответа
Я бы порекомендовал добавить переполнение: скрыто; (и Zoom: 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>
Это происходит потому, что ваши Divs не имеют высоты. Вы можете добавить пустой div с с четким: оба сразу после вашего ул. Или вы можете добавить эти стили в UL
width: 100%;
overflow: auto;
см. это для объяснения.
Добавьте высоту : 28px; к вашему ul в ваших CSS. Джонатан и Четан уже дали очень хорошее объяснение того, почему это работает, но для подтверждения, родители плавучих элементов не влияют на высоту их плавающих детей.