时间戳

首页 > 解决方案 > 使用填充自动填充剩余高度

html - 使用填充自动填充剩余高度

问题描述

我希望我的导航锚的填充是导航中剩余的内容。我已将其设置为具有max-height: 90px;. 我不想做的是对它们应用固定填充，例如padding: 36px 0;. 如果不自己调整，我怎么可能做到这一点？

nav {
  display: flex;
  align-items: center;
  min-height: 90px;
  padding-left: 30px;
  padding-right: 30px;
}

nav a {
  margin: 0 15px;
  background-color: orange;
}
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

标签： htmlcss

解决方案

您必须给出 的<nav>值align-items，stretch并使<a>标签也成为弹性框，使用align-items: center：

nav {
  display: flex;
  align-items: stretch;
  min-height: 90px;
  padding-left: 30px;
  padding-right: 30px;
}

nav a {
  padding: 0 15px;
  background-color: orange;
  flex-grow: 1;
  display: flex;
  align-items: center;
}
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

推荐阅读