twitter-bootstrap 如何在表格中的 <i> 标签(图标)之间留出空间?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18574699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a space between <i> tags (icons) in table?
提问by Beginner
I have a classic HTML table. In one column I want to add 3 icons with links to edit for example users. I am using twitter-bootstrap and glyphsicons. How to make more space between icons??? I prefer to use CSS.
我有一个经典的 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>
回答by Fabrizio Calderan
Just apply a padding (or a margin, depending on the style you've used) between elements, e.g.
只需在元素之间应用填充(或边距,取决于您使用的样式),例如
td a + a {
padding-left: 3em;
}
回答by NaYaN
you have to use paddingattribute in styletag.
你必须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>
回答by Krasimir
Normally atags are inline elements. So, the box-model is not what you expect. I'll suggest
通常a标签是内联元素。所以,盒模型不是你所期望的。我会建议
a {
display: inline-block;
margin: 0 10px 0 0;
}
回答by Tib
In css you can add a margin to your
在 css 中,您可以为您的
a {margin-right: 20px;}
回答by Aaron Digulla
Give them a right padding (margin doesn't work on inline elements):
给他们一个正确的填充(边距不适用于内联元素):
.icon-ok { padding-right: 1em; }
.icon-pencil { padding-right: 1em; }
If you want to avoid the space after the last icon, you can give the surrounding table cell a negative right margin (so the two eliminate each other) or use more complex CSS rules to cancel the last gap.
如果你想避免最后一个图标后面的空格,你可以给周围的表格单元格一个负的右边距(这样两者相互消除)或使用更复杂的 CSS 规则来取消最后一个间隙。

