Question

我很新，但已经阅读了很多类似的SO问题。我仍然不确定我错过了什么：我试图在整个父区域中点击链接。我的下面的代码使链接整个宽度但不是整个区域的高度，即使我使用高度：100％。请帮忙。谢谢！

<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse: collapse;
}

th {
    background-color: #00169d;
    color: white;
    padding: 8px;
}

th a {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 8px;
}

</style>
</head>
<body>
    <table>
        <tr>
            <th><a href='tmp'>Date</a></th>
            <th><a href='tmp'>ABCDEF</a></th>
            <th><a href='tmp'>XYZ XYZ</a></th>
        </tr>
    </table>
</body>
</html>

Answer 1

不要定义锚（a）的宽度/高度如果你想要更大的按钮，请添加更大的填充。

＆＃13;

table {
  border-collapse: collapse;
}

th {
  background-color: #00169d;
  color: white;
  padding: 0;
}

th a {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 16px;
  color: white;
}

th a:hover {
  background-color: grey;
}

＆＃13;

<table>
  <tr>
    <th><a href='tmp'>Date</a></th>
    <th><a href='tmp'>ABCDEF</a></th>
    <th><a href='tmp'>XYZ XYZ</a></th>
  </tr>
</table>

＆＃13;

CSS - 获取填充整个父区域的链接

1 个答案: