horizontal nav bar

how to stretch it across the parent?

[greengrass]

hi,

I've got a css template that has the links in the horizontal nav bar bunched in the middle. I want to change it so that they stretch across the parent div.

how do i do this please?

the css for the navbar div is as follows:

.hnav
{
border-bottom: solid 1px #fff;
text-align: center;
}
.hnav, .hnav ul li a
{
padding-top: 3px;
padding-bottom: 4px;
}
.hnav ul, .hnav ul li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
.hnav ul li a
{
margin: 0 -1px 0 0;
padding-left: 10px;
padding-right: 10px;
border-left: solid 1px #000;
border-right: solid 1px #000;
white-space: nowrap;
}
.hnav ul li a:link, .hnav ul li a:visited, .hnav ul li a:active, .hnav ul li a:hover
{
text-decoration: none;
}
.hnav ul li span.divider
{
display: none;
}

and the html goes:

<div class="hnav">

<ul><li>list items</li>

</ul>

<hr class="hide">
</div>

Any help would be greatly appreciated. Let me know if you need any more of the code, I don't really know what to include.

[doodlebee]

If you want your li's to stretch, try this:

<div id="nav">
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
<hr />
</nav>

#nav {
width:100%;}

#nav ul {
text-align:center;
list-style-type:none;
width:100%;}

#nav li {
float:left;}

#nav li a, #nav li a:link {
display:block;
padding:5px;}

hr {
clear:left;
visibility:hidden;}

And that should pretty much do it for ya.

[greengrass]

thanks for your help doodlebee. unfortunately i couldn't get your solution to work. think i'll just try to learn more css.

cheers, greengrass

[doodlebee]

unfortunately i couldn't get your solution to work

What didn't work about it? I've got about 6 sites online right now that use this exact format, and they work fine...

Can you tell me what went wrong?