css - 对齐 td 内的两个跨度 - 一左一右

Question

我有一张 table 。在 td 内部我有两个 span 标签——一个 span 标签我想左对齐，另一个右对齐，但是 td 不允许这样做:

<table>
  <tr>
    <td colspan="5"><span>$</span><span>1000</span></td>
  </tr>
</table>

所以我希望 $ 与 td 的最left 对齐，而 1000 与最远的 对齐td 的右边。

这可能吗？

Answer 1

您可以使用以下选择器，而无需使用额外的类:

td span:last-child{ /*not compatible with <=IE8*/
    color:green;
    float:right;
}

演示:http://jsfiddle.net/QR3kP/1/

---

为了与 IE7 及更高版本兼容，请使用以下 CSS 代码:

td span{
    float:right;
}
td span:first-child{ /* compatible to >=IE7 */
    float:left;
}

演示:http://jsfiddle.net/QR3kP/4/

---

另一种方法是将 <td> 中的文本右对齐和 float只有第一个<span> :

td {
    text-align:right
}
td span:first-child {
    float:left;
}

演示:http://jsfiddle.net/QR3kP/29/

---

您可以通过使用更少的 css 声明来使用与上述类似的方法:

td span:first-child + span {
    float:right;
}

在上面的例子中，默认的 td文本对齐是左的，你只选择紧接在第一个 span 之后的 sibling 。 .那你就float它在右边。当然，你可以使用 ~选择器，在本例中。

演示:http://jsfiddle.net/QR3kP/32/

---

请在此处查看兼容性图表:http://kimblim.dk/css-tests/selectors/

在这里查看 CSS 选择器:http://www.w3.org/TR/CSS2/selector.html