html - 使链接与父链接高度相同

Question

好像是加了

a {
    display: block;
    height: 100%
}

不创建与父级大小相同的链接(在本例中为 li)。

.navbar-nav > ul > li {
    display: inline-block;
    line-height: 70px;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

blockquote,
h1,
h2,
h3,
h4,
h5,
h6,
html,
p {
  color: #333333;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  margin: 0px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500
}
.nav {
  background-color: #FF8F2E;
  height: 70px;
  margin-top: 0px;
}
.navbar-nav {
  text-align: right;
  position: relative;
  height: 100%;
}
.navbar-nav > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 70px;
  display: block;
}
.navbar-nav > ul > li {
  display: inline-block;
  line-height: 70px;
  height: 100%;
  padding-left: 20px;
  padding-right: 20px;
}
.navbar-nav > ul > li:hover {
  background-color: #F27000;
}
.navbar-nav > ul > li > a {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}
.brand {
  margin-left: 20px;
  color: #fff;
  display: block;
  position: absolute;
}
.brand > h2 {
  display: inline-block;
  line-height: 70px;
}
.brand-inverse {
  color: #333333;
}

<nav class="nav navbar">
  <div class="brand brand-inverse">
    <h2>Title</h2>
  </div>
  <div class="navbar-nav">
    <ul>
      <li class="no-link"><a href="">Home</a>
      </li>
      <li class="no-link"><a href="">About</a>
      </li>
      <li class="no-link"><a href="">Documentation</a>
      </li>
    </ul>
  </div>
</nav>

这是我认为唯一可以影响的事情。

如何让 li 中的 a 继承其父级的高度？

Answer 1

您只需将 .navbar-nav > ul > li > a 设置为 display: block。您还需要为 anchor 元素的 href 定义一个值并删除 pointer-events: none，以便您的链接正常工作。

演示

blockquote,
h1,
h2,
h3,
h4,
h5,
h6,
html,
p {
  color: #333333;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  margin: 0px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500
}
.nav {
  background-color: #FF8F2E;
  height: 70px;
  margin-top: 0px;
}
.navbar-nav {
  text-align: right;
  position: relative;
  height: 100%;
}
.navbar-nav > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 70px;
  display: block;
}
.navbar-nav > ul > li {
  display: inline-block;
  line-height: 70px;
  height: 100%;
  padding-left: 20px;
  padding-right: 20px;
}
.navbar-nav > ul > li:hover {
  background-color: #F27000;
}
.navbar-nav > ul > li > a {
  color: inherit;
  text-decoration: none;
  display: block;
}
.brand {
  margin-left: 20px;
  color: #fff;
  display: block;
  position: absolute;
}
.brand > h2 {
  display: inline-block;
  line-height: 70px;
}
.brand-inverse {
  color: #333333;
}

<nav class="nav navbar">
  <div class="brand brand-inverse">
    <h2>Title</h2>
  </div>
  <div class="navbar-nav">
    <ul>
      <li class="no-link"><a href="http://google.com">Home</a>
      </li>
      <li class="no-link"><a href="http://google.com">About</a>
      </li>
      <li class="no-link"><a href="http://google.com">Documentation</a>
      </li>
    </ul>
  </div>
</nav>

这将解决您提到的高度问题。但是，我建议从您的 li 中删除填充，并为 a 元素提供填充。这样，按钮的整个宽度都可以点击，而不仅仅是文本的宽度。

这是这个小改动的演示。

演示

blockquote,
h1,
h2,
h3,
h4,
h5,
h6,
html,
p {
  color: #333333;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  margin: 0px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500
}
.nav {
  background-color: #FF8F2E;
  height: 70px;
  margin-top: 0px;
}
.navbar-nav {
  text-align: right;
  position: relative;
  height: 100%;
}
.navbar-nav > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 70px;
  display: block;
}
.navbar-nav > ul > li {
  display: inline-block;
  line-height: 70px;
  height: 100%;
}
.navbar-nav > ul > li:hover {
  background-color: #F27000;
}
.navbar-nav > ul > li > a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding-left: 20px;
  padding-right: 20px;
}
.brand {
  margin-left: 20px;
  color: #fff;
  display: block;
  position: absolute;
}
.brand > h2 {
  display: inline-block;
  line-height: 70px;
}
.brand-inverse {
  color: #333333;
}

<nav class="nav navbar">
  <div class="brand brand-inverse">
    <h2>Title</h2>
  </div>
  <div class="navbar-nav">
    <ul>
      <li class="no-link"><a href="http://google.com">Home</a>
      </li>
      <li class="no-link"><a href="http://google.com">About</a>
      </li>
      <li class="no-link"><a href="http://google.com">Documentation</a>
      </li>
    </ul>
  </div>
</nav>