Question

如何将关闭图标对准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>

Answer 1

有几种方法可以这样做。您可以将其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属性的值。

Answer 2

这是您所要求的结果，显然图形结果不是很好，可能您应该添加一个空白。

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>

Answer 3

在图标上使用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>

Answer 4

此代码实现了您想要执行的操作。但是它与内容重叠。您可能想要像我一样添加一些填充，这样它就不会重叠。

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>

Answer 5

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

view image of output

TD图标右上方对齐怎么办？

5 个答案:

`float: right`

修改标记

`position: absolute`