Hi, I am using html5 so i guess i am able to put <div> inside the <a> (display: block). But when the <div> has float: left, it always brings extra space between <a> in IE7. Other browser works quite fine. Does anyone know any reason or solution? Thanks a lot!!
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<style>
.block {
list-style:none;
display: block;
background: blue;
width: 200px;
color: black;
overflow: hidden;
clear: both;
}
div {
line-height: 20px;
}
div.left {
line-height: 30px;
float: left;
}
div.right {
float: left;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#" class="block">
<div class="left">first</div>
<div class="right">second</div>
</a>
</li>
<li>
<a href="#" class="block">
<div>third</div>
</a>
</li>
</ul>
</body>
</html>
If you view the code from browser, you will be able to to see there is a gap between 'second' and 'third'. By removing the 'float: left' from 'second', the gap will be gone.
Thanks a lot, everyone!
