CSS水平導航欄問題

<style> 
*{ 
    margin:0; 
    padding:0; 
    border:0; 
} 

#navlist{ 
    display:block; 
    width: 100%; 
    float: left; 
    list-style: none; 
    background-color: #f2f2f2; 
    border-bottom: 5px solid #ccc; 
    border-top: 5px solid #ccc; 
} 

#navlist li{ 
    float: left; 
} 

#navlist li a{ 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #069; 
    border-right: 5px solid #ccc; 
} 

#navlist li a:hover{ 
    color:#c00; 
    background-color:#fff; 
} 

#navlist a#current{ 
    color:#c00; 
} 



/*SEARCH*/ 

#navlist li input{ 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #069; 
    background-color: #f2f2f2; 
    border-right: 5px solid #ccc; 
} 

#navlist li input:hover{ 
    color: #c00; 
    background-color:#fff; 
} 

#navlist li input #searchbar{ 
} 
</style> 
</head> 

<body> 
      <div> 
       <ul id="navlist"> 
        <li><a href="index.html" id="current" title="">Home</a></li> 
        <li><a href="" title="">Page 1</a></li> 
        <li><a href="" title="">Page 2</a></li> 
        <li><a href="" title="">Page 3</a></li> 
        <li><a href="" title="">Page 4</a></li> 
        <form action="search.asp"> 
         <li><input id="searchbar" type="text" name="searchbar" size="15" value="INSERT SEARCH"/></li> 
         <li><input class="searchbut" type="submit" value="Search"/></li> 
        </form> 
       </ul> 
      </div> 

</body>

這是一個搜索欄水平導航欄。我的問題是雙重的。我怎樣才能使我指定的高度，如height:30px;水平導航和每一個環節和輸入框的頂部和底部填充將完全適合以匹配指定的容器高度（自動調整大小以指定的高度）?;我試着用padding:100% 10px;a{下和input{但沒有奏效。其次，我要輸入什麼選擇器來分別修改輸入類（例如，#navlist li input #searchbar{ size:15; }）？CSS水平導航欄問題

來源

2011-09-09 Aaron