將表格單元格右側的圖標對齊？

我有一個簡單的表格單元格，其中包含一個文本和一個圖標。我想對齊左側的文本和右側的圖標。我試過這樣，但它不起作用。我知道的唯一解決方案是創建另一個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>

來源

2016-02-05 Black

建議您刪除'ALIGN =「權「'因爲html元素的align屬性已被棄用：w3.org/TR/html401/present/graphics.html#adef-align – webeno

嘗試文本和圖標使用

style="float:right;"

這樣的：

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>

另外，由於webeno已在評論中正確指出，所以請儘量避免它。

來源

2016-02-05 08:56:41

建議您添加align att html元素的ribute已被棄用：https：//www.w3.org/TR/html401/present/graphics.html#adef-align – webeno

@webeno： - 更新了。謝謝！ –

只需添加將使您的圖標右側。

span { 
    float: right; 
}

更新後的例子：

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>

來源

2016-02-05 08:57:27 ketan

建議您刪除'align =「right」'作爲html元素的align屬性已棄用：w3.org/TR/html401/present/graphics.html#adef-align – webeno

@webeno完成它。謝謝。 – ketan

試試這個：

<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>

來源

2016-02-05 08:57:37 prashant

建議您刪除'align =「right」'，因爲html元素的align屬性已被棄用：w3.org/TR/html401/present/graphics.html#adef-align – webeno

如果他沒有拉右類不管用。如果他使用bootstrap，它可能會工作，但不是在這種情況下。 –

如果你希望他們在相同的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>

來源

2016-02-05 08:58:41

好的解決方案，我喜歡它。 – Black

我很高興能幫上忙。 –

在你的CSS增加一個類

table i.fa{ 
    float: right; 
}

來源

2016-02-05 08:58:54 PHPExpert

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>

這是我認爲最好的辦法......

來源

2016-02-05 09:27:45 mithu

將表格單元格右側的圖標對齊？

回答

相關問題