Html 在表格单元格中将图标向右对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35219871/
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
Align icon to the right in a table cell?
提问by Black
I have a simple table cell which contains a text and an icon. I want to align the text on the left and the icon on the right. I tried it like this, but it does not work. The only solution i know would be to create another tdwhere i put the icon inside. But i want both, text and icon in one td
我有一个简单的表格单元格，其中包含一个文本和一个图标。我想将左侧的文本和右侧的图标对齐。我像这样尝试过，但它不起作用。我知道的唯一解决方案是创建另一个td我将图标放在里面的解决方案。但我想要文本和图标合二为一td
table {
border: 1px solid red;
}
td {
border: 1px solid black;
width: 200px;
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<table>
<tr>
<td>Text <span align="right"><i class="fa fa-toggle-on"></i></span></td>
<td>Test</td>
</tr>
</table>回答by Rahul Tripathi
Try to use
尝试使用
style="float:right;"
like this:
像这样：
table {
border: 1px solid red;
}
td {
border: 1px solid black;
width: 200px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<table>
<tr>
<td>Text <span style="float:right;"><i class="fa fa-toggle-on"></i></span></td>
<td>Test</td>
</tr>
</table>Also as webeno has correctly pointed out in comments, the align attribute has been deprecated now.So try to avoid it.
同样正如 webeno 在评论中正确指出的那样，align 属性现在已被弃用。所以尽量避免。
回答by mithu
table {
border: 1px solid red;
}
td {
border: 1px solid black;
width: 200px;
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<table>
<tr>
<td>Text <span ><i class="fa fa-toggle-on pull-right"></i></span></td>
<td>Test</td>
</tr>
</table>this is the best way i think...
这是我认为最好的方式...
回答by Atilla Arda A??kg?z
If you want them in same td(not adding another for icon) you can try this:
如果你想让它们在同一个 td（不为图标添加另一个），你可以试试这个：
<td>
<div style="float:left;width:50%;">I stay at left</div>
<div style="float:right;width:50%;">And I stay at right</div>
</td>
回答by PHPExpert
add one more class in your css
在你的 css 中再添加一个类
table i.fa{
float: right;
}
回答by ketan
Just add will make your icon to right side.
只需添加将使您的图标位于右侧。
span {
float: right;
}
Your updated example:
您更新的示例：
table {
border: 1px solid red;
}
td {
border: 1px solid black;
width: 200px;
}
td > span {
float: right;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<table>
<tr>
<td>Text <span><i class="fa fa-toggle-on"></i></span></td>
<td>Test</td>
</tr>
</table>回答by Prashant
Try This:
尝试这个：
<style>
/*If not using bootstrap add this to you css*/
.pull.right{
float:right;
}
<table width="100%">
<tr>
<td>Text <span><i class="fa fa-toggle-on pull-right"> </i></span></td>
<td>Test</td>
</tr>
</table>
