html - 可 float 元素转换为 td 元素

Question

我无法让这种风格发挥作用。看看我的画:

标记:

<h1Title</h1>
<table>
    <tr>
        <td>
            <dfn>help</dfn>
            <a href="link0.php">
            <span>text</span></a>
        </td>
        <td><a href="link1.html">
            <span>text</span></a>
        </td>
    </tr>
</table>

我正在尝试制作 <td>使用 <a> 可点击的元素元素作为一个 block 。但是，我需要用 <dfn> 放一个小的“标题” <td> 内的元素也。我可以制作 <dfn>对齐到右上角并保留 <a>垂直文本相对于其容器对齐而不与 <dfn> 冲突当它存在时。

提前致谢

Answer 1

我更改了您的标记位并添加了一些定位和填充以获得接近您发布的图像的内容:

HTML

<h1>Title</h1>
<table>
    <tr>
        <td>
            <span class="cellContainer">
                <dfn>help</dfn>
                <a href="link0.php">text</a>
            </span>
        </td>
        <td>
            <a href="link1.html">text</a>
        </td>
    </tr>
</table>

CSS

td {
    border: 1px solid black;
}
.cellContainer {
    position: relative;
    display: inline-block;
    padding: 12px 0;
}
a {
    background: grey;
    padding: 12px 24px;
}
dfn {
    position: absolute;
    top: 0;
    right: 0;
}

jsFiddle Demo

演示中的边框代表单元格边框。灰色背景是链接区域。