Стилизация тегов li с помощью float: left - стандартный способ создания горизонтальных панелей навигации. Но всякий раз, когда я делаю это, весь список панели навигации отделяется от содержащего элемента div.
Удаление float: left решит проблему, но давайте предположим, что я хочу сделать это следующим образом.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="temp.css" />
</head>
<body>
<div id="header">
<h2>Demo: Navigation Bar</h2>
<ul id="navbar">
<li>
<a href="#">News</a>
</li>
</ul>
</div>
</body>
</html>
CSS
#header {
margin: 10px;
width: 8in;
background-color: green;
margin-left: auto; /* setting margin to auto centers block element */
margin-right: auto; /* width must not be 100% */
}
#header ul { /* ul */
list-style-type: none;
padding: 0;
margin-top: 0px;
}
#header li {
display:block;
float:left;
background-color: silver;
margin: 0;
}
Любое понимание очень ценится!
Edit:
Решение состоит в том, чтобы добавить пустой div после списка или стилизовать содержащий div с помощью overflow: hidden.
После поиска объяснения, почему это происходит, я нашел отличную ссылку, объясняющую все!
http://css -tricks.com / все о-поплавки /