Question

我有一个带有文字和图标的表格单元格。我希望两个元素都链接到同一个地方。我希望文本对齐到左侧，图标对齐到表格单元格的右侧。代码看起来像这样：

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

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

此外，当用户点击它时，我会抓取<a>标记的宽度。如果我将文本和图标剪切成两个不同的标签，我的测量将是不准确的。

Answer 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>之外呢？不漂亮，但有效：jsFiddle

Answer 2

为右侧span-element分配CSS float属性是正确的。举个例子：

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

Answer 3

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

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

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

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

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

请参阅DEMO

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

3 个答案: