Question

我有一个经典的HTML表格。在一列中，我想添加3个图标，其中包含用于编辑的链接，例如用户。我正在使用twitter-bootstrap和glyphsicons。如何在图标之间腾出更多空间??? 我更喜欢使用CSS。

<td>
   <a href='#'>
       <i class='icon-ok'></i>
   </a>
   <a href='#'> 
       <i class='icon-pencil'></i> 
   </a> 
   <a href='#'>
       <i class='icon-remove'></i>
   </a>
</td>

Answer 1

只需在元素之间应用填充（或边距，取决于您使用的样式），例如

td a + a {
   padding-left: 3em;
}

Answer 2

您必须在padding代码中使用style属性。

<td>
    <a href='#'><i class='icon-ok'></i></a>
    <a style="padding-left:25px;" href='#'><i class='icon-pencil'></i></a>
    <a style="padding-left:25px;" href='#'><i class='icon-remove'></i></a>
</td>

Answer 3

在css中，您可以为

添加保证金

a {margin-right: 20px;}

Answer 4

给它们一个正确的填充（边距对内联元素不起作用）：

.icon-ok { padding-right: 1em; }
.icon-pencil { padding-right: 1em; }

如果你想避开最后一个图标后面的空格，你可以给周围的表格单元格一个负的右边距（这样两者相互消除）或使用更复杂的CSS规则来取消最后的间隙。

Answer 5

通常 a 标签是内联元素。所以，盒子模型不是你所期望的。我建议

a {
   display: inline-block;
   margin: 0 10px 0 0;
}

如何在表格中的<i>标签（图标）之间建立空格？</i>

5 个答案: