制作<a> link fill full height of </a> <div> <a>

Question

I have a header with links for navigation. Each link is a div, and inside it there is an a link. I want to make each a link fill the vertical and horizontal space of the div.

.TopNav {
  position: relative;
  border-bottom: 1px solid black;
}

.TopNav-wrapper {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  background-color: gold;
}

.TopNav-item {
  display: inline-block;
  width: 100px;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  margin-right: 20px;
  border: 1px solid tomato;
  height: 72px;
}
.TopNav-a {
  background-color: tomato;
  color: white;
}

<nav class="TopNav">
  <div class="TopNav-wrapper">
    <div class="TopNav-item">
      <a class="TopNav-a" href="">First</a>
    </div>
    <div class="TopNav-item">
      <a class="TopNav-a " href="">Second</a>
    </div>
    <div class="TopNav-item">
      <a class="TopNav-a" href="">Third</a>
    </div>
  </div>
</nav>

And a fiddle: https://jsfiddle.net/6rp1canq/

这可能吗？

Answer 1

以这种方式更改.TopNav-a样式：

.TopNav-a {
  display: block;
  background-color: tomato;
  color: white;
  height: 72px;
  line-height: 72px;
}

Answer 2

在执行a

的div周围写下<a><div>Test</div></a>标记

Answer 3

您可以使用flexbox布局：

.TopNav {
  position: relative;
  border-bottom: 1px solid black;
}

.TopNav-wrapper {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  background-color: gold;
}

.TopNav-item {
  display: inline-block;
  width: 100px;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  margin-right: 20px;
  border: 1px solid tomato;
  height: 72px;
}
.TopNav-a {
  background-color: tomato;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

<nav class="TopNav">
  <div class="TopNav-wrapper">
    <div class="TopNav-item">
      <a class="TopNav-a" href="">First</a>
    </div>
    <div class="TopNav-item">
      <a class="TopNav-a " href="">Second</a>
    </div>
    <div class="TopNav-item">
      <a class="TopNav-a" href="">Third</a>
    </div>
  </div>
</nav>

Answer 4

你可以将div包装在一个锚中。