13

我有一张桌子。在 td 里面我有两个 span 标签——一个 span 标签我想左对齐，另一个右对齐，但是 td 不允许这样做：

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

所以我希望$与 td的最左侧对齐，而1000与 td 的最右侧对齐。

那可能吗？

4

7 回答 7

19

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

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文本对齐是左对齐，您只选择紧跟在 first 之后的同级span。然后你就float在右边。当然，你可以使用选择器，在这种情况下~也是一样的。

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

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

在此处查看 CSS 选择器：http: //www.w3.org/TR/CSS2/selector.html

于 2013-04-12T15:30:02.350 回答
3

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

HTML

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

CSS

.left{float:left;}
.right{float:right;}
于 2013-04-12T15:29:46.173 回答
3

可能最好用花车来做。

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

于 2013-04-12T15:28:15.043 回答
2

您可以设置包含，以及包含您float: left的美元金额。span$float: rightspan

这是一个简单的演示。

于 2013-04-12T15:28:41.510 回答
1

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

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>
于 2013-04-12T15:27:32.723 回答
1

尝试这个：

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

演示

于 2013-04-12T15:28:35.210 回答
1

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

<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>
于 2013-04-12T15:28:44.670 回答