如何在表格单元格的两侧放置两个元素

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