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

Answer 2

最好用花车做这件事。

<td colspan="5"><span class="left">$</span><span class="right">1000</span></td>

CSS：

.left {
    float: left
}

.right {
    float: right;
}

jsFiddle：http://jsfiddle.net/NLZU5/

Answer 3

您可以在包含float: left的{{1}}上设置span，在$上设置包含您的美元金额的float: right。

这是一个简单的demo。

Answer 4

最好的方法是在每个跨度上放置一个类，并将浮点数应用于每个类

HTML

<span class="left">$</span><span class="right">1000</span>

CSS

.left{float:left;}
.right{float:right;}

Answer 5

最简单的方法是将第一个浮动到左边，第二个浮动到右边

http://jsfiddle.net/L3QU2/1/

<table width="100%">
  <tr>
    <td colspan="5">
      <span style="float:left">$</span>
      <span style="float:right">1000</span></td>
  </tr>
</table>

Answer 6

试试这个：

<table style="width:100%">
  <tr>
    <td colspan="5"><span style="float:left;">$</span><span style="float:right;">1000</span></td>
  </tr>
</table>

DEMO

Answer 7

您可以使用CSS类定义跨度的float样式。

<style>
    .left { float: left; }
    .right { float: right; }
</style>

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

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

7 个答案: