Div with overflow: hidden doesn't clear padding of floating unordered list
I was trying to get my div that contains floating elements, to enlarge to encompass them, but it doesn't seem to pay attention to the padding of the elements, effectively chopping them off. How can I get the div to be the correct height for my list items?
html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
</head>
<body>
<div class="nav">
<ul class="nav">
<li class="nav"><a class="nav" href="#">One1</a></li>
<li class="nav"><a class="nav" href="#">Two</a></li>
<li class="nav"><a class="nav" href="#">Three</a></li>
<li class="nav"><a class="nav" href="#">Four</a></li>
</ul>
</div>
<div class="after"><h2>Heading</h2></div>
</body>
</html>
css:
ul.nav, ul li.nav {
display: inline;
margin: 0px;
padding: 0px;
}
ul.nav {
list-style-type: none;
}
li.nav {
display: block;
float: left;
background-color: red;
}
a.nav {
background-color: green;
padding: 10px;
margin: 0;
}
a:hov开发者_如何学JAVAer.nav {
background-color: gray;
}
div.nav {
background-color: blue;
overflow: hidden;
width: 100%;
}
div.after {
clear: left;
}
I'm going in the same direction edl is: a, as an inline element, does not have vertical padding.
However, IE up to IE 7 does not work well with display: inline-block (see http://www.quirksmode.org/css/display.html), so I recommend you set your links to display: block. Your list items are already floated, so it doesn't make a difference.
On a related note, I would also recommend you change your markup and stylesheet for clarity and readability:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<link type="text/css" rel="stylesheet" href="/stylesheets/test.css">
</head>
<body>
<ul id="nav">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
<h2>Heading</h2>
</body>
</html>
and
#nav {
background-color: blue;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
#nav li {
background-color: red;
float: left;
}
#nav li a {
background-color: green;
display: block;
padding: 10px;
}
#nav li a:hover {
background-color: gray;
}
Not every element needs to have a class, and using the same name for different purposes based on their tags will just induce a lot of headache later on. Just give the main element an ID and have your rules originate from there.
That way, you can also get rid of unnecessary divs, simplifying your markup.
If you're talking about vertical padding, an anchor is an inline element and doesn't have vertical dimensions. Just set a.nav{display:inline-block;} and you should get some vertical padding.
I'm not sure if overflow:hidden works on floated grandchildren. I would suggest removing the display:inline on the ul (is there a specific reason it´s there?) and setting the overflow:hidden on the ul instead of on the div.
Making the ul and inline element with floated block level elements in it is bound to lead to problems as I don´t think that´s valid.
By the way, there really is no need to give all elements a class; if the containing div has a class already, you can target its children like:
.nav ul {
}
.nav li {
}
// etc.
加载中,请稍侯......
精彩评论