导航项总是跳出顶部栏 (CSS)

Question

我为这个疯狂的黑魔法捏了把汗。

"bla bla" 是 <nav>，它位于我的 <div class="top_bar">（蓝色条）内，当我将 float:right 添加到导航栏时，它会跳到右边并走出酒吧。

<div class="top_bar">
    <a href="#"><h3>Nafame / <?php echo $_SESSION['username']; ?></h3></a>

    <span></span>

    <nav>
        <a href="#">bla bla</a>
        <a href="#">bla bla</a>
    </nav>
</div>

奇怪的是我可以"fix"有两个选项：

a) 如果我从标题中删除 <h3> 标签，它会弹出。 b) 如果我在标题和导航之间添加一个随机 <span>hello</span>。（下图使用选项 b）。

这是我的 CSS:

.top_bar {
    width: 100%;
    background-color: lightblue;
    border-bottom: 3px solid blue;
    padding: 1px;
    padding-left: 10px;
}

nav {
    float: right;
}

这个 top_bar 所在的文件包含在我的 header 文件的顶部，该文件的内容就是我在上面发布的所有内容。感谢您的帮助！

Answer 1

如果您尝试将 nav 放入 .top_bar，请使用内联元素或 block/inline 元素（例如 div 并将宽度设置为一些 %.

下面我将 <h3> 更新为 <span>

.top_bar {
  width: 100%;
  background-color: lightblue;
  border-bottom: 3px solid blue;
  padding: 1px;
  padding-left: 10px;
}

nav {
  float: right;
}

<div class="top_bar">
  <a href="#">
    <span>Nafame /
      <?php echo $_SESSION['username']; ?>
    </span>
  </a>

  <nav>
    <a href="#">bla bla</a>
    <a href="#">bla bla</a>
  </nav>
</div>

Answer 2

Header 元素显示块，这意味着它们占据 100% 的宽度，如果您将其设置为内联，它将允许您在其右侧而不是下方进行导航。

编辑：它适用于跨度，因为默认情况下跨度是内联的。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header

.top_bar {
    width: 100%;
    background-color: lightblue;
    border-bottom: 3px solid blue;
    padding: 1px;
    padding-left: 10px;
}

nav {
    float: right;   
}
h3{
display:inline;
}

<div class="top_bar">
  <a href="#">
    <h3>Nafame /
      <?php echo $_SESSION['username']; ?>
    </h3>
  </a>

  <span></span>

  <nav>
    <a href="#">bla bla</a>
    <a href="#">bla bla</a>
  </nav>
</div>

导航项总是跳出顶部栏 (CSS)

Navigation item always jumping out of a top bar (CSS)

html

css

css-float

nav