탐색 버튼과 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

nav의 중심에 버튼을 배치하는 방법은 무엇입니까? 밑에 사업부를 살다. – user3415893

탐색 버튼과 div

답변

관련 문제