Как я могу расположить нижнюю границу слова в нижней части его контейнера?

ProgramBox

Как я могу расположить нижнюю границу слова в нижней части его контейнера?

Post author:admin
Запись опубликована:27 марта, 2023
Post category:Вопросы по программированию

#html #css #jsx

#HTML #css #jsx

Вопрос:

Я пытаюсь установить нижнюю границу этих слов в навигационной панели в нижней части контейнера.

У меня это работает с границей, появляющейся под словом, когда оно наведено, но я хочу, чтобы граница отображалась выровненной по нижней части контейнера, а не непосредственно под ним (слова должны оставаться там, где они есть, с промежутком между словом и его границей). Граница). Как я могу это сделать?

Вот мой 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 , но мне нужно, чтобы белая граница совпадала с нижней частью темно-синего контейнера.

Ответ №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*/
}

Чтобы граница отображалась в нижней части контейнера: Пространство, которое вы видите вокруг этих слов, добавляется тем, что 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>

1. Извините, я думаю, я должен был быть более ясным. Я хотел, чтобы слова продолжали находиться там, где они находятся в центре контейнера, но я хочу, чтобы только граница располагалась в нижней части контейнера, возможно ли это? Базовая линия помогла перейти, хотя я никогда не использовал это, спасибо

2. @Jayg713 То есть вы хотите сказать, что между словом и его подчеркиванием должен быть большой пробел? Да, это возможно. Кроме того, подчеркивание должно отображаться только при наведении курсора мыши (как в вашем коде) или всегда (как на изображении)?

3. Только при наведении курсора, я просто хотел показать, как это выглядит при наведении курсора. Но да, большой разрыв между словом и границей

4. @Jayg713 Я обновил свой ответ, чтобы сделать это — дайте мне знать, если это то, что вы искали! (Кроме того, вам также следует обновить свой вопрос, чтобы он по-прежнему был полезен другим пользователям с тем же вопросом)

5. Это имеет смысл и да, именно то, что я искал, спасибо.

Ответ №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>

Ответ №3:

В этом случае промежутки занимают 100% высоты родительского элемента и добавляют границу с элементом before.

Этот метод будет работать с любой высотой (я установил высоту в 100 пикселей, но он будет работать с любым значением) на .navbar-container-b без изменения отступов на других элементах (в данном случае span)

 .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>