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

它不是真的＆＃39;在此上下文中的菜单项。在菜单之外使用不同的元素，然后可以随意定位。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

Answer 2

您可以为最后一个元素使用伪选择器

#navigationBarList li:last{ /* css */ }

或者给它一个ID和样式，只有那个具有更多特异性的ID

<li id="signin"><a href="#Sign In">Sign In</a></li>

#navigationBarList li#signin{ /* css */ }

Answer 3

你可以这样做。使用“margin：auto”将文本居中对齐并添加一个额外的容器。我还假设您希望链接文本之间的空间相等，而不是每个链接跨越的整个宽度。

#navigationBar{
    display: block;
    position:relative;
    margin-right: 10px;
    padding: 10px;
    background-color: black;    
    font-size: 25px;
    color: red;
    width: 100%;
}

#navigationBarList{
    display: block;
    margin:auto;
    width:600px;
}
#navigationBarList li{
    display: inline;
    margin-right: 20px;
    margin-left:20px;
}

#navigationBarList li:last-child{
   position:absolute;
   right:20px;
}

<div id="navigationBar">
<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>
</div>

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

3 个答案: