垂直对齐导航栏的 ul 列表项

Question

我正在尝试重新创建自定义导航栏。如图所示，导航栏有四个按钮。

但是，在我的导航栏中，其中一个按钮似乎总是聚在一起。我想通过删除链接来查看是否是由于空间不足，但一个链接似乎总是下降。

有人有办法实现上图中的导航栏吗？我对我的 css 有点生疏所以解决方案所以任何帮助理解为什么会发生这种情况将不胜感激。

这是我的导航栏和 css 的 html

.navigation-bar {
  position: fixed;
  z-index: 1;
  margin: auto;
}

.navigation-bar li {
  list-style-type: none;
}

.navigation-bar img {
  height: 40px;
  width: 40px;
}

.navigation-bar ul {
  overflow: hidden;
  height: 70px;
  background-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(5px);
}

.navigation-bar li {
  float: right;
}

<div class="navigation-bar">
  <img style="float: left" src="assets/shared/logo.svg" alt="">
  <ul class>
    <li>
      <a href="#">
        <h6><strong>03  </strong>TECHNOLOGY</h6>
      </a>
    </li>
    <li>
      <a href="#">
        <h6><strong>02  </strong>CREW</h6>
      </a>
    </li>
    <li>
      <a href="#">
        <h6><strong>01  </strong>DESTINATION</h6>
      </a>
    </li>
    <li>
      <a href="#">
        <h6><strong>00  </strong>HOME</h6>
      </a>
    </li>
  </ul>
</div>

我尝试了一些解决方案，但似乎没有任何效果。我无法将链接放在一行中，也无法将其右对齐。

Answer 1

第一

从第3行删除

class

<ul class>

第二个

学习 flex-box ，浮动是老派

.navigation-bar ul {
    overflow: hidden;
    height: 70px;
    background-color: rgba(255,255,255,0.18);
    backdrop-filter: blur(5px);

    //added properties
    width:100%;
    display:flex;
    justify-content:space-evenly;
}

弹性盒子的资源：

1. 凯文鲍威尔 youtube 教程：https://youtu.be/u044iM9xsWU
2. MDN 文档：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Answer 2

Flex box 绝对是去这里的方式。其他人提供了非常有用的链接，但我也想看看关于此的 css tricks 文章。我在这方面去了镇上，但看到下面有完整注释的标记

/* added this to give you a starry night */
body {
  margin: 0;
  background-image: url(https://picsum.photos/3333/5000?image=827);
  background-size: cover;
}

.navigation-bar {
  --ul-left-padding: 2rem; /* this is how far we want the ul left padding to be*/
  display: flex; /* added this */
  align-items: center; /* added this */
  /*position: fixed; removed this so the navigation bar is full width*/
  position: sticky;
  margin-top: 0.5rem;
  padding-left: 1rem;
  /*z-index: 1; deleted this*/
  /*margin: auto; deleted this - not needed */
}

.navigation-bar li {
  list-style-type: none;
  counter-increment: count; /* added this so we can use counters*/
}

/* added this rule so rather than adding numbers, it does it automatically for you!*/
.navigation-bar li::before {
  content: "0"counter(count);
  margin-right:0.5rem;
  font-weight: bold;
}

/* added this to ensure the anchor elements look like the parent elements */
.navigation-bar a {
  text-decoration: none;
  color: inherit;
}

.navigation-bar img {
  height: 40px;
  width: 40px;
  border-radius: 100%; /* put a circle around the cat */
}

.navigation-bar ul {
  
  display: flex; /* added this to arrange the li elements in a row*/
  align-items: stretch; /* added this so the li:hover rule puts the line at the bottom of the element*/
  gap: 0.5rem; /* added this to put a space between each li elmement*/
  margin: 0;
  padding: 0 1rem 0 var(--ul-left-padding); /* added this to remove default padding and put a space on each side.*/
  /*overflow: hidden;*/
  height: 70px;
  background-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(5px);
}

.navigation-bar li {
  display: flex; /* make this a flex item to space the anchor elements vertically in the center */
  align-items: center;
  /*float: right; removed this */
  padding-inline: 0.5rem;
  color: white;
  border-bottom: 2px solid transparent; /* so the border doesn't keep shoving up the text, if we make the border transparent it'll take up the space but won't be visible */
  transition: border-bottom-color 200ms; /*make it a smooth transition */
}

.navigation-bar li:hover {
  border-bottom-color: white;
}

.spacer {
  flex-grow: 1;
  position: relative; /* create a new containing block for the ::before pseudo element */
}
.spacer::before {
  content: ""; /* always need this so it displays */
  position: absolute; /* move this to the center of the parent element */
  left: 1rem;
  top: 50%;
  height: 0.25rem;
  width: calc(100% + var(--ul-left-padding) * 0.25); /* make the width so it always overlaps the ul to the right by 25% of the stated padding */
  background: rgba(128,128,128,0.25); /* make it a bit transparent */
  z-index: 1; /* put ut in front of the ul element */
}

<div class="navigation-bar">
  <img src="https://placekitten.com/50/50" alt=""><!-- deleted style attribute - floats are so 1990s-->
  <div class="spacer"></div> <!-- added this so it pushes the menu to the right.-->
  <ul>
    <!-- I've rearranged these to put them in the order you specified in the image example supplied and removed the <h6> tag. We'll style the anchor tag instead. We'll use counters to add the numeric prefixes-->
    <li><a href="#">HOME</a></li>
    <li><a href="#">DESTINATION</a></li>
    <li><a href="#">CREW</a></li>
    <li><a href="#">TECHNOLOGY</a></li>
  </ul>
</div>

Answer 3

这是一个使用 flexboxes 的快速解决方案。我试着像你的第一个屏幕一样模拟标题。

.main-page {
  background: gray;
  height: 100vh;
  width: 100wv;
}

.navigation-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
 
}

.navigation-bar li {
  list-style-type: none;
}

.navigation-bar img {
  height: 40px;
  width: 40px;
}

.navigation-bar ul {
  margin: 0;
  padding: 0 5%;
  display: flex;
  overflow: hidden;
  height: 70px;
  background-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(5px);
}

.navigation-bar li {
  float: right;
  padding: 0 10px;
  transition: background-color 0.3s ease;
}

.navigation-bar h6 {
  font-size: 12px;
  font-weight: 400;
}

.navigation-bar li:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.25);
}

.navigation-bar a:link {
  text-decoration: none;
  color: white;
  }

.navigation-bar a:visited {
  color: white;
  }

<div class="main-page">
  <div class="navigation-bar">
    <img src="assets/shared/logo.svg" alt="">
    <ul>
      <li>
        <a href="#">
          <h6><strong>03  </strong>TECHNOLOGY</h6>
        </a>
      </li>
      <li>
        <a href="#">
          <h6><strong>02  </strong>CREW</h6>
        </a>
      </li>
      <li>
        <a href="#">
          <h6><strong>01  </strong>DESTINATION</h6>
        </a>
      </li>
      <li>
        <a href="#">
          <h6><strong>00  </strong>HOME</h6>
        </a>
      </li>
    </ul>
  </div>
 </div>

Answer 4

您需要覆盖显示以在

li

和

h6

上内联。

ul {
  list-style-type: none;
}
li {
  display: inline;
}
h6 {
  display: inline;
}

<nav class="navigation-bar">
  <ul>
    <li>
      <a href="#">
        <h6><strong>03  </strong>TECHNOLOGY</h6>
      </a>
    </li>
    <li>
      <a href="#">
        <h6><strong>02  </strong>CREW</h6>
      </a>
    </li>
    <li>
      <a href="#">
        <h6><strong>01  </strong>DESTINATION</h6>
      </a>
    </li>
    <li>
      <a href="#">
        <h6><strong>00  </strong>HOME</h6>
      </a>
    </li>
  </ul>
</nav>