html - 显示属性忽略导航栏的背景色

Question

我有一个简单的导航栏，我希望最后 3 个元素在右边，所以我使用 span 元素来做到这一点。但是，它们当然变成了 block 级元素，因为 li 是 block 级元素。但是，当我设置属性 display: inline; 我的导航栏的整个背景颜色都消失了。这是完整的代码

.navBar{
  list-style-type: none;
  font-family: monospace;
  font-size: 30px;
  background: rgb(0,124,96);
  display: inline;
  margin: 0;
  padding: 0;
}
.right-content{
  float: right;
}

<div class="container-fluid">
  <ul class="nav navBar">
    <li>
      <a href="#">Home</a>
    </li>
    <span class="right-content">
      <li>
        <a href="#">Portfolio</a>
      </li>
      <li>
        <a href="#">About Me</a>
      </li>
      <li>
        <a href="#">Contact Me</a>
      </li>
    </span>
  </ul>
</div>

我还有一个问题，我无法使用text-align: right; 在我的 span 元素上，这是为什么？

Answer 1

其他答案包含无效的 HTML，其中 span 作为 ul 的子级。我重写了它以省略无效的 HTML。

.navBar:after { ... } 只是为了确保周围的 navBar 高度包括 float 元素，如果它们产生换行或基于屏幕尺寸的东西。

.navBar{
  list-style-type: none;
  font-family: monospace;
  font-size: 30px;
  background: rgb(0,124,96);
  margin: 0;
  padding: 0;
}
.navBar:after {
  content: '';
  clear: both;
  display: block;
}
.navBar li {
  display: inline-block;
}
.navBar li.aside {
  float: right;
  margin-left: 0.5em;
}

<div class="container-fluid">
  <ul class="nav navBar">
    <li>
      <a href="#">Home</a>
    </li>
    <li class="aside">
      <a href="#">Portfolio</a>
    </li>
    <li class="aside">
      <a href="#">About Me</a>
    </li>
    <li class="aside">
      <a href="#">Contact Me</a>
    </li>
  </ul>
</div>