导航项总是跳出顶部栏（CSS）

Question

我一直在为这个疯狂的黑魔法出汗。

＆＃34; bla bla＆＃34;是我<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>

奇怪的是我可以修复＆＃34;有2个选项：

a）如果我从标题中删除<h3>标签，则会弹回。 b）如果我在title和nav之间添加一个随机<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

如果您尝试将nav放入.top_bar，请使用内联元素或块/内联元素（例如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

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

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

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;