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;
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

如何让a内的li继承其“{1}}的高度？父？

Answer 1

100%的概念是它将取父母的价值。

所以你有一个.link元素，其高度是其父级的100％现在，父级是li标记，其高度再次为100%。

因此，.link不知道要采取什么样的高度，因为它试图获取100%的值，而不是像素的实际值。

因此，至少您的ul必须设置一个高度属性，以便将其执行到li标记，然后将其传送到.link元素

修改1：更新小提琴链接后，a标记与其li具有相同高度所需的唯一更改是添加{ {1}}也会移除display:block;以使锚标记可以点击。

pointer-events:none;

Answer 2

您只需将.navbar-nav > ul > li > a设置为display: block即可。您还需要为锚元素的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>

这将解决您提到的height问题。不过，我建议您从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>

使链接与父级相同

2 个答案: