title: How to remove space between ul and li
body: <p>My html and css code</p>
  
  <pre><code>&lt;ul class="tabs"&gt;  
      &lt;li&gt;&lt;a href="#" class="tab active"&gt;Tab one&lt;/a&gt;&lt;/li&gt;  
      &lt;li&gt;&lt;a href="#" class="tab"&gt;Largeeeeeeeeeeeeeeeeeeeeeeee  Tab&lt;/a&gt;&lt;/li&gt;  
      &lt;li&gt;&lt;a href="#" Class="tab"&gt;Tab three&lt;/a&gt;&lt;/li&gt;                                                                                                                                      
  &lt;/ul&gt;
  &lt;div class="content" style="overflow-x:scroll;"&gt;
      CONTENT
  &lt;/div&gt;
  
  
  
  ul.tabs {
      margin: 0px;
      padding: 0px;
  }
  
  ul.tabs li {
      list-style: none;
      display: inline;        
  }
  
  ul.tabs li a {  
      display:inline-block;
      width:10%;      
      margin-bottom:0px;  
      color: #FFFFFF;
      padding: 8px 14px 8px 14px;
      text-decoration: none;
      font-size: 9px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight: bold;
      text-transform: uppercase;
      border: 1px solid #ffcce5;  
      background: #ffcce5;
      border-radius:6px 6px 0 0;  
      text-overflow: ellipsis;    
      white-space: nowrap;    
      overflow:hidden;    
  }
  .content {
      background-color: #ffffff;
      padding: 10px;
      border: 1px solid #464c54;
  }
  </code></pre>
  
  <p>I am trying to show a tab view,everything works fine until i add</p>
  
  <pre><code>text-overflow: ellipsis;    
  white-space: nowrap;    
  overflow:hidden;
  </code></pre>
  
  <p>here a gap is show between ul and li,i could not remove the <strong>gap(Horizontal)</strong> without removing</p>
  
  <pre><code>overflow:hidden;
  </code></pre>
  
  <p>I dont know where i went wrong.</p>
  
  <p>Thanks</p>
  
  <p><strong>EDIT:</strong>
  --<a href="http://jsfiddle.net/3nC7Y/" rel="nofollow">jsfiddle</a></p>