浮動元素到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> 

我試圖通過使用<a>元素作爲一個塊，使<td>元素點擊。但是，我還需要在<td>內放置一個帶有<dfn>元素的小「標題」。我可以將<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

演示中的邊框表示單元格邊框。灰色背景是鏈接區域。