如何制作整个 td 链接答案

【问题标题】：How To Make An Entire td A Link如何制作整个 td 链接
【发布时间】：2014-12-16 11:12:54
【问题描述】：

在问这个问题之前，我尝试研究并尝试了给定的结果，但无济于事，只要光标进入 td，您就可以单击其中的链接。我以前做过一次，但记不太清了。

这是 HTML：

<table>
<tr>

    <td class="nav" align="center" valign="center" width="125" height="35">
<ul class="nav"><li class="nav">
<font size="4" color="#BE2625">
<a href="#">
Home
</a>
</font>
</li></ul>
    </td>          

    <td class="nav" align="center" valign="center" width="125" height="35">
<ul class="nav"><li class="nav">
<font size="4" color="black">
<a href="">
Menu
</a>
</font>
</li></ul>
    </td>



        <td class="nav" align="center" valign="center" width="125" height="35">
<ul class="nav"><li class="nav">
<font size="4" color="black">
<a href="">
Info
</a>
</font>
</li></ul>
    </td>  

</tr>
</table>

这是 CSS：

ul.nav{
    text-decoration: none;
    display: table-cell;
        padding: 0px;
        list-style: ;
    color: black;
    }

ul li.nav{
    float: left;
        width: 100%;
        text-align: center;
    text-decoration: none;
    list-style-type: none;
    color: black;
    padding: 0px;
     }

ul li.nav:hover{
    float: left;
    text-align: center;
    text-decoration: none;
    list-style-type: none;
    text-valign: bottom;
    color: black;
     }

ul li a{
    margin: 0px;
    display: table;
        padding: 5px 0px 5px 0px;
    text-decoration: none ;
    border: 1px solid;
    border-radius: 3px;
    border-color: transparent; 
    color: black;
    width: 100%;
    height: 100%;

    }

ul li a.nav:hover{
    text-align: center;
    background:transparent;
    color: black;
    width: 100%;
    height: 100%;
    display: table;
    }

ul li ul.nav{
    width: 25%;
    display: none ;
    color: black;
    }

ul li.nav:hover ul{
    float: center;
    opacity: .87;
    position: absolute;
        display: block; /* display the dropdown */
    color: black;

}

td.nav {
    border: 5px solid;
    border-radius: 100px;
    border-color: #FAEBD7; 
    color: black;
    background-color: #FAEBD7;
}

td a.nav {
    width: 100%;
    height: 100%;
    display: table;
}

td a.nav: hover{
    width: 100%;
    height: 100%;
    display: table;
}

td.nav:hover{
    color: black;    
        background: #ed1a3b;
    border: 5px solid;
    border-radius: 100px;
    border-color: #FAEBD7; 
    }

这是 jsfiddle：

http://jsfiddle.net/9kat4ztL/1/

提前感谢您的帮助，如果问题不够清楚，请告诉我哪里出了问题，我会做出更改。

【问题讨论】：

我试图弄清楚您为什么要为此使用表格，以及已弃用或过时的元素和属性。
就像我被教导的那样，我理解 div，但我更喜欢使用表格。
也许您可以使用 javascript 或 jquery 将您的整个 <td> 链接。
您正在处理电子邮件模板？这是一封电子邮件吗？
@VitorinoFernandes 不，我正在制作导航栏。

标签： html css

【解决方案1】：

好吧，不提你糟糕的标记和不恰当的使用，这里有一个方法：

JSFiddle

我们的想法是为td 设置position: relative 并在其中绝对定位a 与top: 0;、left: 0;、display: block

【讨论】：

【解决方案2】：

用更少的html和css制作菜单，同时为<a>标签添加样式而不是<li>

ul.nav {
  text-decoration: none;
  padding: 0px;
  list-style: none;
  color: black;
}
ul.nav li{
  display: inline-block;
  text-align: center;
  padding: 0px;
}
ul.nav li a {
  margin: 0px;
  text-decoration: none;
  border: 5px solid;
  border-color: transparent;
  color: black;
  background-color: #FAEBD7;
  display: block;
  border-radius: 100px;
  padding: 13px 44px;
}
ul.nav li a:hover {
  text-align: center;
  color: black;
  background: #ed1a3b;
  border: 5px solid;
  border-color: #FAEBD7;
}

<ul class="nav">
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="">Menu</a>
  </li>
  <li>
    <a href="">Info</a>
  </li>
</ul>

【讨论】：