Question

我有一个导航，我想让子元素（在这种情况下：一个标签）填充flex父级（ul）的高度。是否可以不使用填充并且仅依赖于flexbox？任何帮助将在这里受到赞赏。正如您在codepen中看到的那样，a标签中的黑色不会填充该区域。我最终的计划是在标记悬停时在顶部添加边框。这就是我需要填补这个区域的原因。如果可能的话，我只想使用flexbox而不是padding。

这是我到目前为止所做的：

<div class="nav">
<ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

body,
html { background:skyblue; padding:0; margin:0; }
.nav {
    background-color:salmon;
    height:40px;
    ul          { display:flex; align-items:center; height:100%; }
    ul > li     { list-style:none; background:black; flex:1; }
    ul > li > a {  }
}

https://codepen.io/Jesders88/pen/GvQgzX

Answer 1

<a>代码确实占据了其父<li>元素的全部高度 - 您只是忘了声明<li>元素应该占据100%个<ul>元素的高度。

将height: 100%添加到.nav ul > li会导致<a>代码占据<ul>的完整高度，如此代码中我所创建的<强> here

请注意，只需添加height: 100%即可将<a>标记显示在导航栏顶部。如果您希望在展开的导航栏中垂直和水平居中<a>标记，您可以通过自己制作<li>元素flexbox并使用 align-items 和 justify-content ：

.nav ul > li {
  display: flex;
  align-items: center;
  justify-content: center;
}

我已经创建了一个二级CodePen，展示了这个 here 。

希望这有帮助！

Answer 2

由于您使用的是flexbox，因此居中非常容易，您可以摆脱百分比高度。此外，您的HTML结构可以简化。

body,
html {
  background: skyblue;
  padding: 0;
  margin: 0;
}

nav {
  display: flex;
  background-color: salmon;
  height: 40px;
}

a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

<nav>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</nav>

https://codepen.io/anon/pen/RZQPPe

使用flexbox让子项填充父项

2 个答案: