使锚点填充父级宽度和高度的100％

Question

我想使锚点填充父级（.tab）宽度和高度的100％，因此，当您单击选项卡中的任何位置时，应该就像完全单击锚点一样。锚点应保持垂直和水平居中。

.tabs {
  font-size: 0;
}

.tab {
  background-color: #19222a;
  color: white;
  display: inline-block;
  border: 1px solid #ddd;
  font-size: 14px;
  border-bottom: 0;
  padding: 1em 1.5em;
  top: 1px;
  left: 4em;
  position: relative;
  max-width: 215px;
}

.tab a {
  color: white;
  text-decoration: none;
  display: block;
}

.active {
  background-color: #206996;
  color: white;
  font-weight: bold;
}

table {
  border-top: 1px solid #ddd;
  font-size: 14px;
}

table tr:nth-child(even) {
  background-color: #faf7f7;
}

table tr:nth-child(odd) {
  background-color: #f0f0f0;
}

table th {
  background-color: #206996;
  color: white;
  padding: 5px;
}

table tr td:nth-child(n+4),
table tr td:first-child {
  text-align: center;
}

table tr td:nth-child(-n+4) {
  padding: 5px;
}

<div class="tabs">
  <div class="tab " id="all">
    <a href="?status=all">All tasks</a>
  </div>
  <div class="tab " id="running">
    <a href="?status=running">Running tasks</a>
  </div>
  <div class="tab  active " id="completed">
    <a href="?status=completed">Completed tasks</a>
  </div>
</div>
<div class="table-wrapper">
  <table id="running-tasks">
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Description</th>
      <th>Priority</th>
      <th>Done</th>
      <th>Update</th>
    </tr>
    <tr id="row9" class="done">
      <td>
        9
      </td>
      <td>
        Learn Django
      </td>
      <td>
        Learn Django for work urgentl…
      </td>
      <td>
        High
      </td>
      <td>
        <input id="9" type="checkbox" name="done">
      </td>
      <td>
        <a href="/todo/update/9/"><img src="/static/todo/img/edit-16.png"></a>
        <a href="/todo/delete/9/"><img src="/static/todo/img/delete-16.png"></a>
      </td>
    </tr>
  </table>

我该如何实现？

演示：here

Answer 1

您应将padding: 1em 1.5em;行从选项卡移动到其中的锚点，否则选项卡将始终比锚点宽和高：

.tabs {
  font-size: 0;
}

.tab {
  background-color: #19222a;
  color: white;
  display: inline-block;
  border: 1px solid #ddd;
  font-size: 14px;
  border-bottom: 0;
  top: 1px;
  left: 4em;
  position: relative;
  max-width: 215px;
}

.tab a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 1em 1.5em;
}

.active {
  background-color: #206996;
  color: white;
  font-weight: bold;
}

table {
  border-top: 1px solid #ddd;
  font-size: 14px;
}

table tr:nth-child(even) {
  background-color: #faf7f7;
}

table tr:nth-child(odd) {
  background-color: #f0f0f0;
}

table th {
  background-color: #206996;
  color: white;
  padding: 5px;
}

table tr td:nth-child(n+4),
table tr td:first-child {
  text-align: center;
}

table tr td:nth-child(-n+4) {
  padding: 5px;
}

<div class="tabs">
  <div class="tab" id="all">
    <a href="?status=all">All tasks</a>
  </div>
  <div class="tab" id="running">
    <a href="?status=running">Running tasks</a>
  </div>
  <div class="tab active" id="completed">
    <a href="?status=completed">Completed tasks</a>
  </div>
</div>
<div class="table-wrapper">
  <table id="running-tasks">
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Description</th>
      <th>Priority</th>
      <th>Done</th>
      <th>Update</th>
    </tr>
    <tr id="row9" class="done">
      <td>
        9
      </td>
      <td>
        Learn Django
      </td>
      <td>
        Learn Django for work urgentl…
      </td>
      <td>
        High
      </td>
      <td>
        <input id="9" type="checkbox" name="done">
      </td>
      <td>
        <a href="/todo/update/9/"><img src="/static/todo/img/edit-16.png"></a>
        <a href="/todo/delete/9/"><img src="/static/todo/img/delete-16.png"></a>
      </td>
    </tr>
  </table>