Question

如何将foo左对齐并将条形链接对齐？

<td>
  <span>foo</span>
  <span><a href="">bar</a></span>
</td>

Answer 1

您应该使用float来实现

Demo

td span:first-of-type {
   float: left;
}

td span:last-of-type {
   float: right;
}

请注意，我正在使用的伪目标将分别针对第一个和最后一个span，但如果您希望支持旧版本的IE或其他浏览器，则会失败，使用 unique class使用span。

我在这里使用伪的唯一原因是它可以节省我的声明类，如果你想为每个td
做这个，这是一个巨大的优势

此外，我认为您没有充分了解float或者您必须尝试这样做，如果是这种情况，您可以参考我的回答here获取有关{{1}的详细信息并且还引用this，，这对于此方案不是必需的因为您在float中使用float，但浮动元素除外，但如果您有除了同一td中的这两个元素之外的任何元素或文本，请确保您td浮动元素。

Answer 2

td > span:first-child {
    float: left;
}
td > span:last-child {
    float: right;
}

DEMO：http://jsfiddle.net/Px4un/

Answer 3

您可以使用内联样式，如下所示：

<td>
     <span style="float: left;">foo</span>
     <span style="float: right"><a href="">bar</a></span>
</td>

或简单的CSS：

<style>
.left {
     float: left;
}

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

<td>
     <span class="left">foo</span>
     <span class="right"><a href="">bar</a></span>
</td>

请不要使用伪元素，例如：first-child或：first-of-type，因为它不会跨浏览器。

CSS定位两个水平元素

3 个答案: