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

Question

我使用 <li> 创建了选项卡。我使用 css 添加样式，但问题是，选项卡之间有一个 space。我试图在 ul.tabs li 中添加 margin: 0px;，但 space 仍然存在。

请参阅linkhttp://jsfiddle.net/cfv65agn/

谢谢。

Answer 1

将 "ul.tabs li" 中的边距更改为负数。 -3 摆脱它们，-2 使它们变得很小。

Answer 2

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

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

我刚测试过，效果如下：

 ul.tabs {

   font-size: 0;

 }

 ul.tabs li {

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

}

Answer 3

将 float: left 添加到您的 ul 和 li 会将其固定为（也构成 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

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

之间有 \n

Answer 5

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

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

CSS : How to remove margin between <li>

css

html-lists