如何将单词的边框底部放置在其容器的底部？

如何解决如何将单词的边框底部放置在其容器的底部？

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

我将其悬停在单词下方时显示边框，但是我希望边框显示为与容器底部对齐，而不是直接在其下方（单词应留在原处，并留有间隙字及其边界之间）。我该怎么办？

这是我的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上时，它的外观是这样，但是我需要白色边框与深蓝色容器的底部对齐。

解决方法

要在单词和边框之间添加空格，您可以在单词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*/
}

要在容器的底部显示边框：您在padding:20px上的.navbar-container-b会在这些单词周围看到空格。这会将所有像素（包括底部）增加20像素。

如果将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>

,

由于您已经将显示设置为可弯曲，因此您可以简单地使用align-items：flex-end。

我也将高度调整为35px，将填充调整为2.5px，但是您可以使用这些值来获得最终的所需布局。

.navbar-container-b {
  background-color: rgb(16,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>

,

在这种情况下，跨度占父级高度的100％，并在边框前添加了一个元素。

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

.navbar-container-b {
  background-color: rgb(16,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>