html - 导航项总是跳出顶部栏(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>

奇怪的是我可以用两个选项“修复”它:

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 所在的文件包含在我的头文件的顶部，该文件的内容就是我在上面发布的所有内容。感谢您的帮助!

Answer 1

标题元素显示 block ，这意味着它们占据 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>