Question

我必须做一些基本的错误，因为我不想要下面每个字母之间的空格。

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 。

如果有解决方法，请告诉我！感谢。

Answer 1

afaik有两种好方法，

不要在元素（或）
将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";
}

Working Fiddle

Answer 2

元素之间有空格，

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

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

使用伪类：之前避免DOM之间的空格

2 个答案: