使链接与父链接高度相同-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

487683

文章

249221194

访问

+关注

分类

暂无分类

日期归档

暂无数据

使链接与父链接高度相同

发布于2022-12-07 03:30 阅读(1101) 评论(0) 点赞(23) 收藏(5)

好像加了

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>

展开片段

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

如何让a内部 ali继承其父级的高度？

解决方案

您所要做的就是将您的设置.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>

Expand snippet

这将解决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>