无法使整个框大小的<li>元素成为超链接

Question

我正在尝试将文字对齐到底部，但也使我的整个<li>成为超链接。我缺少这样做？

我之前尝试在li标签之前做一个标签，但无法使定位正常工作。

在这里小提琴：http://jsfiddle.net/txupvyuj/

.navigation {
  max-height: 120px;
  height: 100%;
  width: 100%;
  position: relative;
}
.navigation .navmenu {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
}
.navigation .navmenu .navbox {
  background: #0070a2;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  width: 120px;
  height: 120px;
  max-height: 120px;
  max-width: 120px;
  position: relative;
}
.navigation .navmenu .navbox .navlink {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  font-family: 'Helvetica';
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

<div class="navigation">
  <ul class="navmenu" style="display: inline-block; list-style-type: none;">
    <li class="navbox"><a class="navlink" href="/home">Home</a></li>
    <li class="navbox"><a class="navlink" href="/about">About</a></li>
    <li class="navbox"><a class="navlink" href="/projects">Our Projects</a></li>
    <li class="navbox"><a class="navlink" href="/contact">Contact Us</a></li>
    <li class="navbox"><a class="navlink" href="/login">Client Login</a></li>
  </ul>
</div>

Answer 1

将链接的宽度和高度设为100％，以便完全覆盖<li>元素。然后，您可以使用跨度对齐的底部将文本保留在<a>标记的底部。

.navlink {
    width: 100%;
    height: 100%;
}

.navlink > span {
   position: absolute;
   bottom: 10px;
   left: 0;
   width: 100%;
}

完整，实时的示例：

＆＃13;

＆＃13;

.container {
  max-width: 1200px;
  width: 100%;
  position: relative;
}

.navigation {
  max-height: 120px;
  height: 100%;
  width: 100%;
  position: relative;
}

.navigation .navmenu {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
}

.navigation .navmenu .navbox {
  background: #0070a2;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  width: 120px;
  height: 120px;
  max-height: 120px;
  max-width: 120px;
  position: relative;
}

.navigation .navmenu .navbox .navlink {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  font-family: 'Helvetica';
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

.activenavbox {
  background: #0698d3 !important;
}

.navlink {
  width: 100%;
  height: 100%;
}

.navlink > span {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
}

＆＃13;

<div class="navigation">
	<ul class="navmenu" style="display: inline-block; list-style-type: none;">
        <li class="navbox"><a class="navlink" href="/home"><span>Home</span></a></li>
        <li class="navbox"><a class="navlink" href="/about"><span>About</span></a></li>
        <li class="navbox"><a class="navlink" href="/projects"><span>Our Projects</span></a></li>
        <li class="navbox"><a class="navlink" href="/contact"><span>Contact Us</span></a></li>
        <li class="navbox"><a class="navlink" href="/login"><span>Client Login</span></a></li>
	</ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以执行以下操作，只需添加以下样式：

.navigation .navmenu .navbox .navlink {
    top:0;
    line-height:200px;
}

以下是示例：http://jsfiddle.net/txupvyuj/2/