html - 如何删除 ul 和 li 之间的空格

Question

我的html和css代码

<ul class="tabs">  
    <li><a href="#" class="tab active">Tab one</a></li>  
    <li><a href="#" class="tab">Largeeeeeeeeeeeeeeeeeeeeeeee  Tab</a></li>  
    <li><a href="#" Class="tab">Tab three</a></li>                                                                                                                                      
</ul>
<div class="content" style="overflow-x:scroll;">
    CONTENT
</div>



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;
}

我正在尝试显示一个选项卡 View ，在我添加之前一切正常

text-overflow: ellipsis;    
white-space: nowrap;    
overflow:hidden;

这里在 ul 和 li 之间显示了一个间隙，我无法在不删除的情况下删除 gap(Horizo​​ntal)

overflow:hidden;

我不知道哪里错了。

谢谢

编辑: -- jsfiddle

Answer 1

inline-block 在元素之间添加空白。

将元素写在同一行而不是将它们写在不同的行来解决问题。

改变

<ul class="tabs">  
    <li><a href="#" class="tab active">Tab one</a></li>  
    <li><a href="#" class="tab">Largeeeeeeeeeeeeeeeeeeeeeeee  Tab</a></li>  
    <li><a href="#" Class="tab">Tab three</a></li>                                                                                                                                      
</ul>

到

<ul class="tabs">  
    <li><a href="#" class="tab active">Tab one</a></li><li><a href="#" class="tab">Largeeeeeeeeeeeeeeeeeeeeeeee  Tab</a></li><li><a href="#" Class="tab">Tab three</a></li>                                                                                                                                      
</ul>

CSS:

.content {
    margin-top:-1px;
}

Demo here.