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

добавить в свой CSS:

.topline{
    display: inline-block;
}   

Answer 2

Останови все плавающие! Вместо этого используйте 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>

Answer 3

<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, но, так как вы используете плавающие остальные дивы, вы можете поддерживать его согласованным. Отображение в CSS