如何在 header 的同一行添加导航栏？

Question

我是 css 的新手，所以我想尝试制作一个带有导航栏的网站。我想将导航栏与 header(logo) 放在同一行。我一直在尝试使用左右浮动将 header 和导航栏定位在同一行上，但导航栏文本从不以 header 居中。

我试过调整margin和padding没有用。同样，尝试移动容器 class。我使用 chrome 开发工具检查了我的网站，发现它包含在一个没有出现在我的文本编辑器中的文件中。 P.s。我将链接更改为 #

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>

Answer 1

使用 flexbox

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

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

Answer 2

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

如何在 header 的同一行添加导航栏？

How do you add a navigation bar on the same line as a header?

html

css

css-float