Question

我试图拉伸“nav”元素中的各个“li”元素，以填充HTML中定义的600px的空间，其中包含“ul”我尝试放宽度的“ul =” ：100％;在nav中，li {width：100％;}以及该解决方案的一些不同形式。徒劳无功。我期待你的主人！

<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

拉伸<li>以填充960网格12 col </li>内的水平导航菜单

2 个答案: