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

Question

我是CSS的新手，所以我想尝试使用navbar创建一个网站。 我想将导航栏与标题（徽标）放在同一行。 我一直在尝试使用左右浮动将标题和导航栏定位在同一行，但导航栏文本永远不会与标题居中。

我试图调整页边距和填充都无济于事。 同样，尝试移动容器类。 我使用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>

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 ，该问题将得到解决。

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

问题描述

2 个解决方案

解决方案1
0 2019-09-01 06:16:35

解决方案2
0 2019-09-01 12:19:49

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

问题描述

2 个解决方案

解决方案1 0 2019-09-01 06:16:35

解决方案2 0 2019-09-01 12:19:49

解决方案1
0 2019-09-01 06:16:35

解决方案2
0 2019-09-01 12:19:49