如何将两个元素放置在表格单元格的相对两侧答案

【问题标题】：How to I position two elements on opposite sides of a table cell如何将两个元素放置在表格单元格的相对两侧
【发布时间】：2013-09-22 13:52:05
【问题描述】：

我有一个带有文本和图标的表格单元格。我希望这两个元素链接到同一个地方。我希望文本与左侧对齐，而图标与表格单元格的右侧对齐。代码可能如下所示：

<td><a href="#">Text<span>icon</span></a></td>

编辑：我编辑了代码以表示我最初没有包含的一些要求。文字和图标都必须是链接。

另外，当用户点击它时，我正在抓取<a> 标签的宽度。如果我将文本和图标分成两个不同的 a 标签，我的测量结果将不准确。

【问题讨论】：

你的意思是你的标签？
是的。为了清楚起见，我进行了编辑。谢谢。
查看我的答案的更新。让我知道这是否有帮助。如果没有，你能否分享更多关于你正在尝试做的事情？这可以帮助我们找到最适合您的方法。

标签： css html-table alignment

【解决方案1】：

this 之类的怎么样？

<table>
    <tr>
        <td>Foobar</td>
        <td>
            <div class="left">
                <a href="#">Text</a>
            </div>
            <div class="right">
                <a href="#">icon</a>
            </div>
        </td>
 <table>

td {
    width: 150px;
}

.left {
    float: left;
}

.right {
    float: right;
}

更新：那么将<a> 标记保留在<div>s 之外怎么样？不漂亮，但有效：jsFiddle

【讨论】：

见上面的新要求。
完美，这就是我想要的。谢谢！

【解决方案2】：

您接受的答案远非理想...！
我怀疑您的 HTML 标记在语义上是“正确的”，而答案中显示的更糟！

“浮动解决方案”的一个缺点是，两个元素之间的区域不可点击。这意味着“糟糕的可用性”。

而且我也怀疑“图标”是否真的是页面内容的一部分。相反，我认为它是“装饰”，因此应该将其用作背景图像。

所以你会得到一个简单的解决方案：

<td><a href="#">Text</a></td>

见DEMO

【讨论】：

图标实际上是图标字体的一部分，因此需要将其作为页面上的元素。不过，我同意您的可用性评论。
即使在这种情况下，您也可以使用伪元素之一 ::before 或 ::after 使图标只是“装饰”而不是 HTML 标记中内容的一部分。这都是关于语义的...... ;-)

【解决方案3】：

将 CSS 浮动属性分配给右侧的 span 元素就可以了。举个例子：

<td> 
    <span>left text</span>
    <span style="float: right;">right text</span>
</td>

【讨论】：