如何制作等间距的固定位置导航栏？答案

【问题标题】：How to make a fixed position navbar with equal spacing?如何制作等间距的固定位置导航栏？
【发布时间】：2022-12-30 23:41:51
【问题描述】：

我已经发现 display 和 position 不能同时使用，但似乎找不到其他解决方案。我的代码现在以我想要的方式显示导航栏，但我找不到固定位置的方法，因此它在滚动时保持不变。谢谢！

.navbar {
  top: 0;
  left: 0;
  text-align: justify;
  border: dotted blue;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
}

.navbar a {
  text-decoration: none;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.navbar:after {
  content: '';
  width: 100%;
  /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}

<div class="navbar">
  <a id="home" href="#home">home</a>
  <a id="projects" href="#projects">projects</a>
  <a id="shop" href="#shop">shop</a>
  <a id="about" href="#about">about</a>
  <a id="contact" href="#contact">contact</a>
</div>

在元素之前和之后尝试，并将整个东西放在另一个 div 中，但无法使其工作

【问题讨论】：

标签： html css user-interface

【解决方案1】：

要固定位置以便在滚动时保持不变，请将代码行添加到您的 .navbar

位置：固定；右：0；

完整代码 sn-p 在这里：

.navbar {

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    text-align: justify;
    border: dotted blue;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;

}

【讨论】：