如何在与标题相同的行上添加导航栏？答案

【问题标题】：How do you add a navigation bar on the same line as a header?如何在与标题相同的行上添加导航栏？
【发布时间】：2019-09-01 06:08:12
【问题描述】：

我是 css 新手，所以我想尝试制作一个带有导航栏的网站。我想将导航栏与标题（徽标）放在同一行。我一直在尝试使用左右浮动将标题和导航栏定位在同一行，但导航栏文本从不以标题为中心。

我尝试调整边距和填充无济于事。同样，尝试移动容器类。我使用 chrome 开发工具检查了我的网站，发现它包含在我的文本编辑器中没有显示的内容中。附：我将链接更改为#

body{
  background-color:#fff;
  color:#00f;
  font-family:"Raleway", Helvetica, sans-serif;
  margin:0;
}

 .container{
   width:80%;
   margin: auto;
   overflow: hidden;
 }

.clr{
  clear:none;
}

 #logo{
   border:3px solid #00f;
   padding-left: 10px;
   padding-right: 10px;
   float:left
 }

 #navbar{
   margin:0;
   float:right;
 }

 #navbar ul{
   padding:0;
   list-style:none;
 }

 #navbar li{
   display:inline-block;
 }

 #navbar a{
   color:#00f;
   text-decoration:none;
   font-size:18px;
   padding-right:15px;
 }

<body>

    <div id="main-header">
      <div class="container">
        <h1 id="logo">HM<h1>

        <nav id="navbar">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#" target="_blank">Github</a></li>
            <li><a href="#" target="_blank">Twitter</a></li>
          </ul>
        </nav>

        <div class="clr"></div>

      </div>

    </div>

【问题讨论】：

标签： html css css-float

【解决方案1】：

使用弹性盒

将此样式添加到您的样式中

.container {
  display:flex;
  justify-content:space-between;
  align-items:center;  
}

body{
  background-color:#fff;
  color:#00f;
  font-family:"Raleway", Helvetica, sans-serif;
  margin:0;
}
.container {
  display:flex;
  justify-content:space-between;
  align-items:center; 
}
#logo{
  border:3px solid;
  padding:0 10px;
}
#navbar li{
  display:inline-block;
}
#navbar a{
  text-decoration:none;
  font-size:18px;
  padding-right:15px;
}

<div id="main-header">
  <div class="container">
    <h1 id="logo">HM</h1>
    <nav id="navbar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#" target="_blank">Github</a></li>
        <li><a href="#" target="_blank">Twitter</a></li>
      </ul>
    </nav>
  </div>
</div>

【讨论】：

【解决方案2】：

将margin:0添加到#nav-bar ul，问题就解决了。

【讨论】：