在td内对齐两个跨度 - 一个左侧和一个右侧

Question

我有一张桌子.在td里面我有两个span标签 - 我想要左对齐的一个span标签,另一个右边,但是td不允许:

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

所以我希望$对齐到td 的最左边,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.然后你就float在右边.当然,您可以使用~选择器,在这种情况下也是如此.

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

请参阅此处的兼容性图表:http://kimblim.dk/css-tests/selectors/

请参阅此处的CSS选择器:http://www.w3.org/TR/CSS2/selector.html