This is OK:
<html>
<head>
<title>tabs</title>
<style>
li {
display:inline;
margin:0 90px;
background:#777777 none repeat scroll 0 0;
}
li a {
padding:6px 12px;
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}
</style>
</head>
<body>
<div id="tabs">
<div class="nav">
<ul>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
</ul>
</div>
</div>
</body>
</html>
But if I change li a to make it display:block, everything is gone. Why?
<html>
<head>
<title>tabs</title>
<style>
li {
display:inline;
margin:0 90px;
background:#777777 none repeat scroll 0 0;
}
li a {
padding:6px 12px;
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
display:block;
}
</style>
</head>
<body>
<div id="tabs">
<div class="nav">
<ul>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
</ul>
</div>
</div>
</body>
</html>
EDIT:It seems the padding:6px 12px here not working at all.But moving it into li will make the padding not even(in IE),how?