CSS布局问题：如何让名称与日期在菜单图标旁同行显示

你的问题核心在于块级元素（div）默认会独占一行，所以#name和#date这两个div会自动换行，而且.topline和菜单图标也默认不在同一行。下面给你几种简单的解决方式，推荐用第一种现代布局方案：

方法1：使用Flexbox（推荐） #

Flexbox是目前最简洁的布局方式，能轻松实现元素的横向排列，还能方便控制对齐方式。

修改你的CSS代码如下：

.topnav{
  background-color: #3071a9;
  color: #ffffff;
  /* 让topnav变成flex容器，内部元素横向排列 */
  display: flex;
  align-items: center; /* 垂直居中对齐，让图标和文字对齐更美观 */
  padding: 8px 10px; /* 加一点内边距，避免内容贴边 */
}

.topline{
  padding-left: 20px;
  /* 让topline内部的name和date横向排列 */
  display: flex;
  gap: 15px; /* 给名称和日期之间加一点间距 */
}

/* 不需要给name和date加float了，flex已经搞定 */
#name, #date {
  /* 保留你原来的样式，比如字体大小之类的，这里可以按需添加 */
}

对应的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>

方法2：使用inline-block（兼容旧浏览器） #

如果需要兼容非常老的浏览器（比如IE9及以下），可以把块级元素改成行内块元素：

.topnav{
  background-color: #3071a9;
  color: #ffffff;
  padding: 8px 10px;
}

/* 让菜单图标和topline同排 */
.topnav span, .topline {
  display: inline-block;
  vertical-align: middle; /* 垂直居中对齐 */
}

.topline{
  padding-left: 20px;
}

/* 让name和date同排 */
#name, #date {
  display: inline-block;
  margin-right: 15px; /* 加间距 */
}

方法3：使用Float（不推荐，容易出现布局问题） #

不推荐使用float，因为需要额外处理清除浮动的问题，但如果你一定要用：

.topnav{
  background-color: #3071a9;
  color: #ffffff;
  padding: 8px 10px;
  overflow: hidden; /* 清除内部float的影响 */
}

.topnav span {
  float: left;
}

.topline{
  padding-left: 20px;
  float: left;
}

#name {
  float: left;
  margin-right: 15px;
}

#date {
  float: left;
}

效果说明 #

以上三种方法都能实现：菜单图标 → 名称（John Doe） → 日期（04/27/2018）在同一行显示的效果，其中Flexbox的方式最容易维护，也能轻松应对后续的布局调整（比如响应式适配）。

内容的提问来源于stack exchange，提问作者Peter Sun