HTML / CSS排队div

Question

这是非常基本的CSS问题。我有这个结果：

我希望名称和日期位于菜单图标

旁边的一行上

HTML：

<div class="topnav">
    <span style="font-size:30px;cursor:pointer;" onclick="openNav()">&#9776;</span>
    <div class="topline">
        <div id="name">John Doe</div>
        <div id="date">04/27/2018</div></div>
</div>

CSS：

.topnav{
    background-color: #3071a9;
    color: #ffffff;
}
.topline{
    padding-left: 20px;
}

#name {
    float:left;
}

#date {
    float:left;
} 

Answer 1

<span style="font-size:30px;cursor:pointer;" onclick="openNav()">&#9776;</span>

这需要变成div并且像你的名字和日期一样浮动。你还需要topnav具有合适的宽度（无论是否固定），以便适应所有内容，否则它将被推下。

    <div style="font-size:30px;cursor:pointer;float:left;" onclick="openNav()">&#9776;</div>

您可以使用display:inline或inline-block来保持跨度，但由于您正在浮动其他div，因此也可以保持一致。 Display in CSS

Answer 2

添加到您的CSS：

.topline{
    display: inline-block;
}   

Answer 3

停止所有浮动！请改用flexbox：

.topnav {
  display: flex;
  align-items: center;
  background-color: #3071a9;
  color: #ffffff;
}

#name,
#date {
  margin-left: 20px;
}

<div class="topnav">
  <span style="font-size:30px;cursor:pointer;" onclick="openNav()">&#9776;</span>
  <div id="name">John Doe</div>
  <div id="date">04/27/2018</div>
</div>
</div>