导航按钮和div

我有一个带有5个按钮和栏下的div的丑陋导航栏。导航按钮和div

1）如何将按钮放置在导航栏中间？ 2）如何让他们留在同一行，即使他们没有足够的空间在屏幕上？ 3）如何让div占据其余的空间（高度）？

HTML

<body> 
    <nav id="wrap"> 

      <ul class="navbar"> 

      <li><a href="#">Main</a></li> 

      <li><a href="#">News</a> 
       <ul> 
        <li><a href="#">a</a></li> 
        <li><a href="#">b</a></li> 
       </ul>   
      </li> 

      <li><a href="#">Photos</a> 
       <ul> 
        <li><a href="#">a</a></li> 
        <li><a href="#">b</a></li> 
       </ul>   
      </li> 

      <li><a href="#">Other</a> 
       <ul> 
        <li><a href="#">a</a></li> 
        <li><a href="#">b</a></li> 
       </ul>   
      </li> 

      </li> 
      <li><a href="#">Movies</a></li> 

      </ul> 

</nav> 


<div id="divdiv"> div div div div div </div> 


</body>

CSS

body { 
    height: 100%; 
    background:#FFF; 
    margin: 0 0 0 0; 
} 

#wrap { 
     width: 100%; 
     height: 80px; 
     margin: 0; 

     position: relative; 
     background-color: #00BF5F; 
     margin-bottom:40px; 
    } 


    .navbar { 
     padding-left:0px; 
     height: 80px; 
     margin: 0; 
     position: absolute; 
    } 

     .navbar li { 
      height: auto; 
      width: 150px; 
      float: left; 
      text-align: center; 
      list-style: none; 
      font: bold 14px Tahoma; 
      padding: 0; 
      margin: 0; 
      background-color: #00BF5F; 
      } 


    .navbar a {       
     padding: 31px 0; 
     text-decoration: none; 
     color: white; 
     display: block; 
     } 



    .navbar li:hover, a:hover {background-color: orange; } 



    .navbar li ul { 
     display: none; 
     height: auto; 
     border-top:1px solid white; 
     margin: 0; 
     padding: 0;   
     }    

    .navbar li:hover ul  { display: block; } 


    .navbar li ul li {background-color: orange; } 


    .navbar li ul li a { padding:5px; } 


    .navbar li ul li a:hover {background-color: red;} 




    #divdiv { 
     width:960px; 
     height:500px; 
     background:red; 
     margin-left:auto; 
     margin-right:auto; 
    }

http://jsfiddle.net/nfTC5/

来源

2014-04-07 user3415893

CSS：

.navbar { 
    min-width: 750px; 
} 
.navbar li { 
    line-height: 80px; 
} 
.navbar li ul li { 
    line-height: 18px; 
}

JSFIDDLE

来源

2014-04-07 20:34:52 Nick

但如何将按钮放在导航的中心？住在它下面的div – user3415893

导航按钮和div

回答

相关问题