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

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