如何将单词的边框底部定位到其容器的底部？

Question

我正在尝试将导航栏中这些单词的底部边框设置为容器的底部。

当它悬停时，我让它与出现在单词下方的边框一起工作，但我希望边框与容器底部对齐，而不是直接在下方（单词应该保持在原位，有一个间隙在单词和它的边界之间）。我该怎么做？

这是我的 JSX。

  <div className="navbar-container-b">
        <span>Today</span>
        <span>Hourly</span>
        <span>10 Day</span>
        <span>Weekend</span>
        <span>Monthly</span>
        <span>Radar</span>
        <span>Video</span>
        <span>More Forecasts</span>
      </div>

和 CSS

.navbar-container-b {
  background-color: rgb(16, 32, 74);
  height: 20px;
  padding: 20px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-container-b span {
  cursor: pointer;

}

.navbar-container-b span:hover {
  border-bottom: 2px solid white;
}

这是当您将鼠标悬停在它们上时的样子https://i.stack.imgur.com/6kfE8.png，但我需要白色边框与深蓝色容器的底部对齐。

Answer 1

要在单词和边框之间添加间隙，您可以在带有单词的span底部添加填充，例如

.navbar-container-b span {
    display:inline-block;  /* so we can add padding to the span */
    padding-bottom: 20px;  /* add the space between the word and border*/
}

使边框出现在容器底部：您在这些单词周围看到的空间是由您在.navbar-container-b 上的padding:20px 添加的。这是向所有边添加 20px，包括底部。

如果您将padding-bottom 更改为0 并使用align-items: baseline;，则文本将正好位于底部。为此，您需要进行的更改是：

.navbar-container-b {
   padding: 20px 20px 0;
   height: 40px; /* add the extra 20px for the space between the word and border*/
   align-items: baseline;
   /* rest of your CSS*/
}

工作示例：

.navbar-container-b {
  background-color: rgb(16, 32, 74);
  height: 40px;
  padding: 20px 20px 0;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.navbar-container-b span {
  cursor: pointer;
  display:inline-block;
  padding-bottom: 20px;
}

.navbar-container-b span:hover {
  border-bottom: 2px solid white;
}

<div class="navbar-container-b">
        <span>Today</span>
        <span>Hourly</span>
        <span>10 Day</span>
        <span>Weekend</span>
        <span>Monthly</span>
        <span>Radar</span>
        <span>Video</span>
        <span>More Forecasts</span>
      </div>

Answer 2

您可以简单地使用 align-items:flex-end，因为您已经将显示设置为 flex。

我还将高度调整为 35 像素，内边距调整为 2.5 像素，但您可以使用这些值来实现最终所需的布局。

.navbar-container-b {
  background-color: rgb(16, 32, 74);
  height: 35px;
  padding: 2.5px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.navbar-container-b span {
  cursor: pointer;

}

.navbar-container-b span:hover {
  border-bottom: 2px solid white;
}

 <div class="navbar-container-b">
        <span>Today</span>
        <span>Hourly</span>
        <span>10 Day</span>
        <span>Weekend</span>
        <span>Monthly</span>
        <span>Radar</span>
        <span>Video</span>
        <span>More Forecasts</span>
      </div>

Answer 3

在这种情况下，跨度占父级高度的 100%，并使用前元素添加边框。

此方法适用于.navbar-container-b 上的任何高度（我已将高度设置为 100px，但它适用于任何值），而无需更改其他元素上的填充（在这种情况下为跨度）

.navbar-container-b {
  background-color: rgb(16, 32, 74);
  /** original height 60px */
  height: 100px; 
  padding-left: 20px;
  padding-right: 20px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-container-b span {
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.navbar-container-b span:hover:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: white;
}

<div class="navbar-container-b">
  <span>Today</span>
  <span>Hourly</span>
  <span>10 Day</span>
  <span>Weekend</span>
  <span>Monthly</span>
  <span>Radar</span>
  <span>Video</span>
  <span>More Forecasts</span>
</div>