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

我正在尝试显示标签视图，一切正常，直到我添加

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

此处显示ul和li之间的差距，我无法删除缺口（水平）而不删除

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.

Answer 2

你走了。

<强> WORKING DEMO

CSS更改：

.content {
    background-color: #ffffff;
    padding: 10px;
    border: 1px solid #464c54;
    margin-top: -5px;    
}

希望这有帮助。

Answer 3

内联块在元素之间添加空格。有很多不同的方法可以做到这一点，但我最喜欢的是简单地使用HTML注释，以便您可以保持良好的代码格式。

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

Answer 4

仅使用此

ul {
    font-size: 0;
}

Working example

Answer 5

在你的CSS中应用这种风格。这只会消除ul和div之间的差距

ul.tabs li a {
    display: inline-flex;
}

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

5 个答案: