选择整个点击而不是仅<a> inside of it</a>

Question

好的就是这件事，我有一张桌子，我有一些<a>，我想要的东西：点击包含那些<td>的完整<a>。< / p>

粘贴我的代码将解释我想要的更好

<td>
  <a><span>{{:: row.spread.spread}} ({{:: row.spread.moneyLine}})</span></a>
</td>

现在唯一可点击的区域是带红色边框的区域

这里是我的css

  td {
    border-bottom: 0;
    font-weight: bold;
    padding: get-space(x-small) + 2;
    text-align: center;
    vertical-align: middle;

    a {
      border: 1px solid red;
    }

好吧，我需要的只是采用完整td的方法并使它们可点击而不是只能点击链接，这对你们来说是否清楚？

Answer 1

在display元素上指定block <a>，然后添加填充内容。删除<td>元素上的填充值也是值得的：

td {
    border-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    padding: 0;

    a {
      padding: get-space(x-small) + 2;
      display: block;
    }
}

如果您需要保留红色边框，请定位<span>元素：

td {
    border-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    padding: 0;

    a {
      padding: get-space(x-small) + 2;
      display: block;

      span {
        border: 1px solid red;
      }
    }
}