文本在TD标签中右对齐

Question

我在td标签中有文字和图像。文本保持静止，但尝试text-align: right;图像。所以我在图像上使用了span类。但是图像不会在文本旁边继续听命令，不会右转。

<td>マンションを購入しようとした時に何から始めたら良いでしょうか 
    <span class="open-button-big">
       <img src="img/open-button-big.png" class="open-button-big-class">
    </span>
</td>  

看起来像：

这是 CSS

table {
    margin-top: 20px;
    display: none;
}

table {
    border-top: solid 1px blue;
}

tr {
    border-top: solid 1px blue;
}

th {
    text-align: center;
    padding: 10px 10px 10px 10px;
}

td {
    font-size: 14px;
}


.Question {
    width: 40px;
}

span {

    text-align: right !important;
}

.open-button-big-class {
    width: 70px;
    height: auto;
}

Answer 1

由于span是一个内联元素，它包装了您应将其显示设置为阻止或使用div的图像。要将整个跨度向右对齐，请使用float: right

table {
  margin-top: 20px;
  width: 100%;
}

table {
  border-top: solid 1px blue;
}

tr {
  border-top: solid 1px blue;
}


td {
  font-size: 14px;
}

span {
  float: right !important;
  display: block;
}

.open-button-big-class {
  width: 70px;
  height: auto;
}

<table>
  <tr>
    <td>マンションを購入しようとした時に何から始めたら良いでしょうか
      <span class="open-button-big">
       <img src="https://www.reduceimages.com/img/share-icon.png" class="open-button-big-class">
    </span>
    </td>
  </tr>
</table>

Answer 2

您可以使用此：

span {
    float: right !important;
}

但是我强烈建议使用这种CSS选择器：

table td span {
    float: right !important;
}

因为仅选择span，所有span都会得到这种样式，使用特定选择更好地控制其他span s