Question

我有一个简单的导航栏，我希望最后3个项目在右边，所以我使用span元素来做到这一点。但是，他们正在变成块级元素，因为li是块级元素。但是，当我设置属性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

您应该将内嵌展示样式应用于li而不是ul（.navBar）：

.navBar{
  list-style-type: none;
  font-family: monospace;
  font-size: 30px;
  background: rgb(0,124,96);
  margin: 0;
  padding: 0;
}
.navBar li {
  display:inline;
}
.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>

Answer 2

其他答案的HTML无效，span为ul的子级。我重写了这个以省略无效的HTML。

.navBar:after { ... }内容只是为了确保周围的navBar高度包含浮动元素，如果它们产生换行或基于屏幕大小的东西。

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

Answer 3

文字对齐不适用于span，因为span永远不会比包含文字更宽，除非您添加display:block或display:inline-block和{ {1}}。

但是，您无需在此处使用width。只需将span元素设置为li即可。

inline-block

.navBar li { display: inline-block; float: left; background:transparent; }上未显示背景颜色的原因是因为使用ul（我认为float，但我不确定）导致{{ 1}}折叠到0高度。因此，您必须在样式表中添加inline。

ul

编辑：要使height元素不相互接触，您可以设置边距：

.navBar{
        height:50px;
        list-style-type: none;
        font-family: monospace;
        font-size: 30px;
        background: rgb(0,124,96);
        margin: 0;
        padding: 0;
    }

Here's a JSFiddle所有这些都在一起。

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

3 个答案: