Question

我有一个丑陋的导航栏，有5个按钮，栏下有一个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/

Answer 1

CSS：

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

JSFIDDLE

导航按钮和div

1 个答案: