css - 如何消除内联块元素之间的间隙

Question

.item-list {
  letter-spacing: -0.3em;
}
.item-list a {
  letter-spacing: 0;
  display: inline-block;
}

<div class="item-list">
  <a href="#">a</a>
  <a href="#">a</a>
  <a href="#">a</a>
  <a href="#">a</a>
</div>

只在win ie6下，差距a 还在exit，letter-spacing:-0.3em删除样式后样式生效a { letter-spacing:0 }

为什么？我能解决这个问题吗？

score 13 · Accepted Answer

哇，这个让我难倒了一段时间......信不信由你，这是你的答案：

字体大小：0；必须添加到父元素

在您的示例中，我将分别定义 a 标签的字体大小，并添加“font-size:0;” 到父 div 元素

换句话说：

CSS：

.item-list{字母间距：-0.3em; 字体大小：0；}

.item-list a{letter-spacing:0;display:inline-block; 字体大小：更高的东西；}

（您的 DOCTYPE 声明也必须正确，否则显示内联块可能会在 IE 中出现问题，至少我在使用 IE7 时遇到了问题）

这应该会结束您在 display:inline-block; 中遇到的任何额外的保证金挫折；

score 3 · Accepted Answer

它与您输入 HTML 的方式有关。因为您在 IDE 中很好地格式化了它，例如，带有空格和换行符，所以这些空格和换行符在页面上显示时会显示出来。所以而不是

<div class="item-list">

    <a href="#">a</a>
    <a href="#">a</a>
    <a href="#">a</a>
    <a href="#">a</a>

</div>

将其输入为一行，它们将消失：

<div class="item-list"><a href="#">a</a><a href="#">a</a><a href="#">a</a><a href="#">a</a></div>

score 1 · Accepted Answer

1

您可以添加此 CSS

a{float:left}

差距将消除

于 2013-10-17T07:18:49.397 回答

score 0 · Accepted Answer

我总是使用：

    line-height: 2.2; //or whatever value you want

我取自 facebook 布局，对我来说效果很棒

4 回答 4