1

このスタイルを機能させることはできません。私の絵を見てください：

マークアップ：

<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>ただし、要素を含む小さな「ヘッダー」も<dfn>内部に配置する必要があり<td>ます。<dfn>右上に揃えて、コンテナが存在する場合と競合することなく、コンテナに対して垂直方向のテキストを揃えておくことができます。<a><dfn>

前もって感謝します

4

1 に答える 1

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 デモ

デモの境界線は、セルの境界線を表しています。灰色の背景はリンク領域です。

于 2012-07-24T03:30:00.653 に答える