导航栏 - 最后一个元素向右浮动但不换行

Question

就在我想我开始理解的时候css...

我的导航栏中的最后一项是当前用户。我希望它向右浮动，但如果用户将屏幕缩小，则隐藏起来而不换行。我已经能够让它正确浮动或不包裹但从来没有同时。我想吃蛋糕。

这是一个演示问题的简单示例。非常感谢！ - 乔恩

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

ul {
  position: relative;
  list-style-type: none;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  display: inline-block;
}

li a {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: wheat;
}

.current-user {
  color: lightblue;
  margin-top: 10px;
  margin-right: 10px;
  float: right;
}

<navbar class="nav-bar">
  <ul>
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link4</a></li>
    <li><a href="#">link5</a></li>
    <li><a href="#">link6</a></li>
    <li><a href="#">link7</a></li>
    <li><a href="#">link8</a></li>

    <!-- Joe float right but be hidden if overflow -->
    <li class="current-user">Joe Doe</li>
  </ul>
</navbar>

Answer 1

方法一：

我建议使用媒体查询并以这种方式隐藏它。例如：

  @media screen and (max-width: 620px) {
    .current-user {
      display: none;
    }
  }

以上CSS仅在屏幕宽度小于620像素时应用。当然，您可以根据需要进行调整。

这里是你的全部代码：

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

ul {
  position: relative;
  list-style-type: none;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  display: inline-block;
}

li a {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: wheat;
}

.current-user {
  color: lightblue;
  margin-top: 10px;
  margin-right: 10px;
  float: right;
}

@media screen and (max-width: 620px) {
  .current-user {
    display: none;
  }
}

<navbar class="nav-bar">
  <ul>
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link4</a></li>
    <li><a href="#">link5</a></li>
    <li><a href="#">link6</a></li>
    <li><a href="#">link7</a></li>
    <li><a href="#">link8</a></li>

    <!-- Joe float right but be hidden if overflow -->
    <li class="current-user">Joe Doe</li>
  </ul>
</navbar>

有关媒体查询的更多信息，请参阅：these docs

方法二：

您也可以绝对定位元素而不是浮动它。例如：

.current-user {
  position: absolute;
  right: 0;
}

这里是一个片段：

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

ul {
  position: relative;
  list-style-type: none;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  display: inline-block;
}

li a {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: wheat;
}

.current-user {
  color: lightblue;
  margin-top: 10px;
  margin-right: 10px;
  position: absolute;
  right: 0;
}

<navbar class="nav-bar">
  <ul>
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link4</a></li>
    <li><a href="#">link5</a></li>
    <li><a href="#">link6</a></li>
    <li><a href="#">link7</a></li>
    <li><a href="#">link8</a></li>

    <!-- Joe float right but be hidden if overflow -->
    <li class="current-user">Joe Doe</li>
  </ul>
</navbar>

这样元素就不会换行了。但是，您必须修复重叠。您可以通过为导航项目分配背景颜色并通过调整 z-index 确保它们滑过用户元素来实现。

我相信方法 1 会是更清洁的解决方案。

导航栏 - 最后一个元素向右浮动但不换行

Nav bar - last element float right but not wrap

html

css

navbar

nowrap