下面是标题内的菜单。ul 和 li 元素是浮动的,现在浮动在标题下方,我试图通过 clear:both 来防止这种情况。但是,这似乎不起作用,所以我想知道......有什么问题?
html:
<header>
<ul>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Item 4</a></li>
</ul>
<div class='clear'/>
</header>
CSS:
header {
background: #888;
height: 20px;
padding: 10px;
}
ul{
margin: 18px 0;
padding: 0;
list-style: none;
}
ul li{
margin: 0 10px 0 0;
padding: 0;
display: block;
float: left;
width: 80px;
height: 20px;
border: 1px solid #000;
background: red;
}
ul li a{
display:block;
width: 100%;
height: 100%;
text-decoration: none;
float: left;
text-align: center;
padding-top: 2px;
}
ul li a:hover{
color: #fff;
background-color: #000;
}
.clear {
clear:both;
}