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

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

这里显示了ul和li之间的差距，如果不删除，我无法删除gapHorizontal

overflow:hidden;

我不知道我哪里出错了

谢谢

编辑：

---

-内联块在元素之间添加空白

将元素写在同一行上，而不是写在单独的行上，以解决问题

改变

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

---

内联块在元素之间添加空白。有许多不同的方法可以做到这一点，但我最喜欢的是简单地使用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>

---

内联块在元素之间添加空白。有许多不同的方法可以做到这一点，但我最喜欢的是简单地使用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>

---

在css中应用此样式。这只会消除ul和div之间的间隙

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

---

在css中应用此样式。这只会消除ul和div之间的间隙

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

给你

CSS更改：

希望这有帮助。

给你

CSS更改：

希望这有帮助。

就用这个吧

ul {
    font-size: 0;
}

就用这个

ul {
    font-size: 0;
}

---

---

你能给我们一个JSFiddle或链接到一个例子吗？@KaiFeller我已经用jsfiddleIam更新了试图消除水平间隙而不是垂直间隙，在css内容中添加：margin:-5px 0px；你能给我们一个JSFiddle或链接到一个例子吗？@KaiFeller我已经用jsfiddleIam更新了试图消除水平间隙而不是垂直间隙，在css内容中添加：margin:-5px 0px@hiral我正在尝试移除ul和之间的水平空格div@user2779544哪个空间？？我看不到任何空间elaborate@Hiraldiv borderblack和ul.tabs之间的水平空格white为borderffcce5-无空格-有空格。我希望这就是你所说的@user2779544-对吗？@hiral ok igot，你能不能通过添加overflow:hidden来说明为什么空间会出现，因为如果从ul.tabs中删除这个css，空间就会消失disappears@hiral我正在尝试删除似乎在ul和之间的水平空格div@user2779544哪个空间？？我看不到任何空间elaborate@Hiraldiv borderblack和ul.tabs之间的水平空格white为borderffcce5-无空格-有空格。我希望这就是你所说的@user2779544-对吗？@hiral ok igot，你能不能通过添加overflow:hidden来说明为什么空间会出现，因为如果从ul.tabs中删除此css，空间就会消失。如果不是这样，要使用内联flex，你必须将flex放在它的容器上。同样，这也不能解决IE10以下的问题。所以对大多数人来说，这不是一个真正有用的解决方案。并非如此，要使用内联flex，您必须将flex放在其容器上。同样，这也不能解决IE10以下的问题。所以对大多数人来说，这不是一个真正有用的解决方案。你在建议之前试过这个吗？你知道它对中元素的文本有什么影响吗？是的，我知道。这正是问题所要问的：删除liThe示例之间的空白是有效的，因为元素有另一种字体大小。如果不这样做，也会得到字体大小：0；。如果有人试图使用这个没有在li元素上设置字体大小的工具，这对他们来说是行不通的。这很明显。你在建议之前尝试过这个吗？你知道它对中元素的文本有什么影响吗？是的，我知道。这正是问题所要问的：删除liThe示例之间的空白是有效的，因为元素有另一种字体大小。如果不这样做，也会得到字体大小：0；。如果有人试图使用这个没有在他们的li元素上设置字体大小的工具，这对他们来说是行不通的。这是显而易见的。