html - Stretching to fill a horizontal Nav menu, within a 960 grid 12 col

Question

Im trying to stretch the individual "li" elements within the "nav" element to fill the space that is 600px as defined in the HTML by the class="grid_8" in the that houses the "ul" Ive tried putting width:100%; in the nav, li { width: 100%;} and some various forms of that solution. No avail. I look to you masters!

<div class="container_12 clearfix" >
    <div class="grid_4">
<!--logo--> <a href="index.html" alt="Above The Frey - Home page"> <img alt="Above The Frey - Home page" src="images/newLogo.png" /> </a>
    </div>

    <div class="grid_8">
                <nav>
<!-- navigation-->  <ul id="nav">

                    <li> <a href="schedule.html" >Schedule</a> </li>
                    <li> <a href="schedule.html" >Portfolio</a> </li>
                    <li> <a href="schedule.html" >Conntact</a> </li>
                    <li class="stretch"></li>
                    </ul>
                </nav>

    </div>
</div>


<!--video Container-->

<div class="container_12" id="videoContainer">

<iframe id="videoBorder" width="560" height="315" src="http://www.youtube.com/embed/fEJOYp3ciD0" frameborder="0" allowfullscreen></iframe>

</div>



</html>




Body {
background-image: url("images/background.jpg");

}
#nav
{
padding:0;
background-color: #333333;
text-align: justify;
}
#nav li 
{

display:inline;
width:100%;
width: 33%;
text-align: center;
}
#nav li a 
{   

   font-family:Arial;
   font-size:12px;
   text-decoration: none;
   float:left;
   padding:10px;
   background-color: #333333;
   color:#ffffff;
   border-bottom:1px;
   border-bottom-color:#000000;
   border-bottom-style:solid;
   margin-top: 100px;
}

#nav li a:hover 
{
   background-color:#9B1C26;
   padding-bottom:12px;
   border-bottom:2px;
   border-bottom-color:#000000;
   border-bottom-style:solid;
   margin: 0px;
   margin-top: 100px;
}

#nav.stretch {
    display: inline-block;
    width: 100%;

     /* if you need IE6/7 support */
    display: inline;
    zoom: 1;
}

 #videoContainer 
{
    background-color: #1f1f1f;
    padding: 20px;


}`

Answer 1

nav {width:100%}, ul#nav {width:100%},ul#nav li {width:100%} 我想这应该可行。

Answer 2

看看这个可能对你想要的有帮助

.grid_8{
    height:auto;
    overflow:hidden;
}
#nav
{
    background-color: #333333;
    text-align: justify;
    width:100%;
    border-bottom:1px;
    border-bottom-color:#000000;
    border-bottom-style:solid;
    height:39px;
}
#nav li 
{
 display:inline-block;
 text-align: center;

}
#nav li a 
{   
   font-family:Arial;
   font-size:12px;
   text-decoration: none;
   float:left;
   padding:10px;
   background-color: #333333;
   color:#ffffff;
   vertical-align:bottom;
}

#nav li a:hover 
{
   background-color:#9B1C26;
   padding-bottom:12px;
   border-bottom:2px;
   border-bottom-color:#000000;
   border-bottom-style:solid;
   margin: 0px;

}

jsFiddle