title: CSS Horizontal Navigation Bar Question
body: <pre><code>&lt;style&gt;
  *{
      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{
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
              &lt;div&gt;
                  &lt;ul id="navlist"&gt;
                      &lt;li&gt;&lt;a href="index.html" id="current" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="" title=""&gt;Page 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="" title=""&gt;Page 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="" title=""&gt;Page 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="" title=""&gt;Page 4&lt;/a&gt;&lt;/li&gt;
                      &lt;form action="search.asp"&gt;
                          &lt;li&gt;&lt;input id="searchbar" type="text" name="searchbar" size="15" value="INSERT SEARCH"/&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;input class="searchbut" type="submit" value="Search"/&gt;&lt;/li&gt;
                      &lt;/form&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>This is a horizontal navigation bar with a search bar. My question is two-fold. How can I make it that I specify a height such as <code>height:30px;</code> for the horizontal navigation and the top and bottom padding of each link and input field will fit exactly to match the specified container height (auto-size to specified height)?; I tried using <code>padding:100% 10px;</code> under <code>a{</code> and <code>input{</code> however that did not work. Secondly what selector do I type to modify the input classes separately (ex. <code>#navlist li input #searchbar{ size:15; }</code> )?</p>