TD圖標右上方對齊怎么辦？
[英]TD icon align top right How to do?
問題描述
如何將關閉圖標對准TD的右上角？ 我試過align和vertical align屬性，但是都無法正常工作。
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <table> <tr> <td> <i class="fa fa-times" aria-hidden="true" align="right" vertical-align="top"></i> <b>Hello world1!</b> </td> <td>Hello world2!</td> </tr> <tr> <td>Hello world3!</td> <td>Hello world4!</td> </tr> </table>
5 個解決方案
解決方案1
2 已采納 2018-08-06 09:26:24
有幾種方法可以這樣做。 您可以將其float到“右側”，也可以簡單地修改標記並將圖標放在文本后面。
float: right
td > .fa { float: right; }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <table> <tr> <td> <i class="fa fa-times" aria-hidden="true" align="right" vertical-align="top"></i> <b>Hello world1!</b> </td> <td>Hello world2!</td> </tr> <tr> <td>Hello world3!</td> <td>Hello world4!</td> </tr> </table>
修改標記
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <table> <tr> <td> <b>Hello world1!</b> <i class="fa fa-times" aria-hidden="true" align="right" vertical-align="top"></i> </td> <td>Hello world2!</td> </tr> <tr> <td>Hello world3!</td> <td>Hello world4!</td> </tr> </table>
如果您需要恰好在右上角的圖標，則可以使用絕對定位。
position: absolute
td { border: 1px solid gray; } .icon-container { position: relative; } .icon { position: absolute; top: -9px; right: -9px; }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <table> <tr> <td class="icon-container"> <i class="icon fa fa-times" aria-hidden="true" align="right" vertical-align="top"></i> <b>Hello world1!</b> </td> <td>Hello world2!</td> </tr> <tr> <td>Hello world3!</td> <td>Hello world4!</td> </tr> </table>
您可以根據自己的喜好調整top和right屬性的值。
解決方案2
1 2018-08-06 09:26:53
這是您所要求的結果，顯然圖形結果不是很好，可能應該添加一個空白。
td { position:relative; } td i { position:absolute; right:-5px; top:-5px; }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <table> <tr> <td> <i class="fa fa-times" aria-hidden="true"></i> <b>Hello world1!</b> </td> <td>Hello world2!</td> </tr> <tr> <td>Hello world3!</td> <td>Hello world4!</td> </tr> </table>
解決方案3
0 2018-08-06 09:26:31
在圖標上使用float:right 。
tr td i { float: right; }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <table> <tr> <td> <i class="fa fa-times" aria-hidden="true"></i> <b>Hello world1!Hello world1Hello world1 Hello world1!Hello world1Hello world1</b> </td> <td>Hello world2!Hello world2Hello world2Hello world2 Hello world2!Hello world2Hello world2Hello world2</td> </tr> <tr> <td>Hello world3! Hello world3! Hello world3!Hello world3! Hello world3! Hello world3!</td> <td>Hello world4! Hello world4! Hello world4!Hello world4! Hello world4! Hello world4!</td> </tr> </table>
解決方案4
0 2018-08-06 09:26:41
這段代碼實現了您想要做的事情。 但是它與內容重疊。 您可能想要像我一樣添加一些填充，因此不會重疊。
td { position: relative; padding: 20px; } .tr { position: absolute; top:0; right:0; }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <table> <tr> <td> <span class="tr"><i class="fa fa-times" aria-hidden="true" align="right" vertical-align="top"></i></span> <b>Hello world1!</b> </td> <td>Hello world2!</td> </tr> <tr> <td>Hello world3!</td> <td>Hello world4!</td> </tr> </table>
解決方案5
0 2018-08-06 09:37:01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>CSS</title>
<style type="text/css">
.cross_icon_lign{
padding-left: 95px;
top: 3px;
position: absolute;
}
.right-align{
padding-left: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<i class="fa fa-times cross_icon_lign" aria-hidden="true" align="right" vertical-align="top"></i>
<b>Hello world1!</b>
</td>
<td class="right-align">Hello world2!</td>
</tr>
<tr class="">
<td>Hello world3!</td>
<td class="right-align">Hello world4!</td>
</tr>
</table>
</body>
</html>
我如何對齊 <td> 在左上角-沒有對齊所有內容？
[英]How do I align something in a <td> in the top-left corner - without aligning everything?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.