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

【问题标题】：Align two spans inside a td - One left and one right对齐 td 内的两个跨度 - 一左一右
【发布时间】：2017-11-13 20:02:48
【问题描述】：

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

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

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

这可能吗？

【问题讨论】：

那里有很多答案，但看起来他们都在说同样的事情。应用一个类并将它们左右浮动
@Andrew 除非这是 TD 的唯一内容，您不必将第一个浮动到左侧。
是的，有很多方法可以做到这一点，到目前为止，它们似乎都是正确的。但这可能取决于他打算如何使用它。

标签： css

【解决方案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

【讨论】：

请注意IE8及以下不支持last-child，但如果您不需要IE8及以下支持，这是迄今为止最好的。
@ajp15243 ：我编辑了我的答案以兼容 IE7 及更高版本。感谢您指出这一点。

【解决方案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/

【讨论】：

【解决方案3】：

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

HTML

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

CSS

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

【讨论】：

.left,.right 不是语义的，.sign, .value 怎么样？
@JuanMendes CSS 类命名中的语义？对此有何进一步参考？
@otinanai CSS 类名应该代表它们所代表的数据，而不是它们在页面上的外观。例如，某些语言会在右侧显示货币符号，在这种情况下，您的 CSS 类名称将没有意义。语义类名称意味着您可以使用备用样式表来创建不同的外观。见css-tricks.com/semantic-class-names 和w3.org/QA/Tips/goodclassnames

【解决方案4】：

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

这是一个简单的demo。

【讨论】：

【解决方案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>

【讨论】：

@DylanHayes 我不是在建议内联样式，问题不在于如何正确分离 CSS 和 HTML，这只是如何完成它的一个示例，它试图简洁显示对 OP 代码的更改最少的 CSS。我希望我不必添加免责声明。最好的答案是真正的 otinanai，它不需要向 HTML 添加任何标记，并且可以简洁地放入 CSS sn-p 中

【解决方案6】：

试试这个：

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

DEMO

【讨论】：

【解决方案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>

【讨论】：

我猜你是第一个回答我问题的人？