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

Question

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

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

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

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

Answer 1

这样的事情怎么样？

<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

Answer 2

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

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

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

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

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

见演示

Answer 3

将 CSS float 属性分配给右侧的 span-element 就可以了。举个例子：

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