Question

我使用<li>创建了标签。我用css来添加样式，但问题是，标签之间有一个空格。我尝试在margin: 0px;中添加ul.tabs li，但空格仍在那里。

感谢。

Answer 1

一个简单的解决方法是将ul的字体大小设置为0，并将类“tabs”设置为0，并直接在列表项上设置正确的字体大小。

这将删除它们之间的默认间距，而不需要神奇的负数。

我刚刚测试过，以下是有效的：

 ul.tabs {

   font-size: 0;

 }

 ul.tabs li {

  font-size: 16px; /* set to the font size you want */

}

Answer 2

更改＆＃34; ul.tabs li＆＃34;为负数。 -3摆脱它们，-2使它们真正小。

Answer 3

添加float：left到你的ul和li也会修复它（使ul也达到100％宽度）：

<强> CSS

ul.tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
    width: 100%;
    float: left;
}
ul.tabs li {
    background: #ffffff;
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    border-top-right-radius: 1em;
    border-top-left-radius: 1em;
    border: 1px solid #afafaf;
    margin : 0px;
    float: left;
}

Here's a jsFiddle

Answer 4

可能是因为您在display:inline-block中设置了ul.tabs li。将其更改为float:left将解决此问题。这通常发生在\n元素之间存在inline-block

时

Answer 5

display: inline-block将尊重他们之间的空白区域。只需删除标签之间的空格即可。不幸的是，遗嘱会使你的代码可读性稍差，但你可以通过在最后的li中放置一个换行符或多或少来补偿。

CSS：如何删除<li> </li>之间的边距

5 个答案: