html - 如何在 html 列表中的不同元素之间添加不同大小的间隙？

Question

我有一个在我的 html 上水平显示的列表。但我希望前 4 个元素出现在屏幕中间，它们之间的间隙相同，然后我希望列表中的最后一个元素位于右上角？

<ul id="navigationBarList">
  <li><a href="#About">About</a></li>
  <li><a href="#Bookings">Bookings</a></li>
  <li><a href="#Blog">Blog</a></li>
  <li><a href="#Pricing">Pricing</a></li>
  <li><a href="#Sign In">Sign In</a></li>
</ul>

到目前为止，我尝试过的一切都没有奏效。我认为这将是关于为单个元素提供一个 id 或其他东西，但由于某种原因它的影响为零

这是CSS:

#navigationBarList{
    display: inline-block;
    margin: 0;
    margin-right: 10px;
    padding: 10px;
    background-color: black;    
    font-size: 25px;
    color: red;
    width: 100%;
}
#navigationBarList li{
    display: inline;
    width: 100px;
    margin-right: 20px;
}

Answer 1

在这种情况下，它并不是“真正的”菜单项。在菜单之外使用不同的元素，然后可以将其放置在您想要的任何位置。

#navigationBarList {
  display: inline-block;
  margin: 0;
  margin-right: 10px;
  padding: 10px;
  background-color: black;
  font-size: 25px;
  color: red;
  width: 100%;
  text-align: center;
}
#navigationBarList li {
  display: inline-block;
  width: 100px;
  margin-right: 20px;
}
a {
  text-decoration: none;
  color: white;
}
nav {
  position: relative;
}
#login {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0.25em;
}

<nav>
  <ul id="navigationBarList">
    <li><a href="#About">About</a>
    </li>
    <li><a href="#Bookings">Bookings</a>
    </li>
    <li><a href="#Blog">Blog</a>
    </li>
    <li><a href="#Pricing">Pricing</a>
    </li>
  </ul>

  <a id="login" href="#Sign In">Sign In</a>
</nav>

注意: - 我应该指出，如果您愿意，您可以仍然将 #SignIn 链接保留为列表项，但是，在这种情况下，父 ul 应该接收 position:relative 以达到相同的效果。