边距不可点击：框模型混淆

我正在尝试使整个表格单元格可点击。我发现的一般建议是使用display: block;，但我所看到的所有例子都只有一行单元格。我有单元格，似乎使生活更难。边距不可点击：框模型混淆

考虑这个颜色鲜艳的例子：

<html> 
    <head> 
     <style type="text/css"> 
      td { border: 1px; background-color: blue; } 
      td a { display: block; background-color: yellow; border: 1px solid red; } 
     </style> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td rowspan=2><a href="#">Left</a></td> 
       <td><a href="#">Upper Right</a></td> 
      </tr> 
      <tr> 
       <td><a href="#">Lower Right</a></td> 
      </tr> 
     </table> 
    </body> 
</html>

锚标签的块（黄色）是所有可点击。但左侧有（蓝色）边缘，在其上下不可点击。我想我需要一些东西来增加填充来填充左侧的整个td单元格（不改变右侧单元格的大小），但是我还没有找到正确的咒语来做这件事。

来源

2011-04-23 Oddthinking

td a { 
    display: inline-block; 
    height: 100%; 
    width: 100%; 
    background-color: yellow; 
    border: 1px solid red; 
}

Demo

example

来源

2011-04-23 03:54:52

啊，我尝试了内嵌块，并且我尝试了高度：100％，但我从来没有同时尝试了两次。谢谢！ – Oddthinking 2011-04-23 03:58:03

为了给出一个行内元素的高度，你需要使用'display：inline-block;' – 2011-04-23 04:00:50

适用于Chrome，但不适用于Firefox 3.6.16。 :-([我不关心这个项目上的IE或者Safari。] – Oddthinking 2011-04-23 04:13:28

另一种选择是使用JavaScript包如jQuery或YUI，并添加点击监听器<td>而不仅仅是<a>

来源

2011-04-23 03:55:58 afranz409

边距不可点击：框模型混淆

回答

相关问题