CSS

Question

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 therefore highlight the gap as there is a border applied to the top of the active list item. This would show the gap.

seler · Accepted Answer

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/

CSS - horizontal navigation list items to fill all available space

Tags:

David

1 Answers

seler

Recent Activity

Donate For Us