0

我一定做错了一些基本的事情，因为我不希望下面每个字母之间有空格。

HTML：

<i class="icon icon1"></i>
<i class="icon icon2"></i>
<i class="icon icon3"></i>

CSS：

.icon {
    display: inline-block;
    position: relative;
    padding: 3px;
    background: yellow;
    margin: 0;
}

.icon1:before {
    content: "A";
}

.icon2:before {
    content: "B";
}

.icon3:before {
    content: "C";
}

链接：http: //jsfiddle.net/qhoc/rkRBY/

我相信每个字符之间都会自动出现空格，除非font-size:0. 我的要求是：

  • 所有字符必须在同一行
  • 会有更多icon4、icon5等。
  • 在不改变字体大小的情况下，它们之间没有空格
  • 可以添加 HTML 包装器，但不会触及 JS 或更改<i>为其他内容。顺便说一句，我正在使用Bootstrap。

让我知道是否有解决方法！谢谢。

4

2 回答 2

2

有两种好方法afaik，

  • 不要在元素之间的 HTML 标记中留出空间（或）
  • 添加display: table-cell到该元素。

尝试这个：

.icon {
    display: table-cell;
    /* removed padding: 3px; */
    position: relative;
    background: yellow;
    margin: 0px;
}

.icon1:before {
    content: "A";
}

.icon2:before {
    content: "B";
}

.icon3:before {
    content: "C";
}

工作小提琴

于 2013-11-04T08:51:30.497 回答
1

元素之间有空间，因此，

<i class="icon icon1"></i><i class="icon icon2"></i><i class="icon icon3"></i>

演示：http: //jsfiddle.net/rkRBY/10/

于 2013-11-04T08:53:56.313 回答