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