邊距不可點擊：框模型混淆

我正在嘗試使整個表格單元格可點擊。我發現的一般建議是使用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

邊距不可點擊：框模型混淆

回答

相關問題