CSS - horizontal navigation list items to fill all available space
Using CSS how is it possible to have a horizontal list and have all list items to fill the available width of the parent space.
I am floating the li's left and then applying some padding to each but I cannot seem to get the full width filled. Thus leaving a gap on the right hand side.
I could potentially float the last item right but what happens is that the active state of the navigation items would there开发者_JS百科fore highlight the gap as there is a border applied to the top of the active list item. This would show the gap.
Treat it as table:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<style>
nav {width: 500px;}
nav ul {
list-style: none;
margin:0;
padding:0;
display: table;
background: red;
width: 100%;
}
nav li {
z-index:10;
text-align: center;
display: table-cell;
}
nav a {
color: #fff;
text-decoration: none;
padding: 0 10px 0;
height: 20px;
line-height: 20px;
display: block;
text-align: center;
background: blue;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">ipsum</a></li>
<li><a href="#">dolor</a></li>
<li><a href="#">sit</a></li>
<li><a href="#">amet</a></li>
</ul>
</nav>
</body>
</html>
http://jsfiddle.net/SURzu/
加载中,请稍侯......
精彩评论