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>

これは、検索バーを備えた水平ナビゲーションバーです。私の質問は2倍です。どのようにして水平ナビゲーションのためにheight:30px;のような高さを指定し、各リンクと入力フィールドの上部と下部のパディングが指定されたコンテナの高さに正確に合うようにすることができますか？私はpadding:100% 10px;をa{とinput{の下で使ってみましたが、うまくいきませんでした。次に、入力クラスを個別に変更するためにセレクタをどのように入力しますか（例：#navlist li input #searchbar{ size:15; }）？CSS水平方向のナビゲーションバーの質問

出典

2011-09-09 Aaron