无法使<h1>元素与导航链接显示在同一行上？

Question

"旧的"；这里是新手。我已经有10年没有编码css或html了。过去很擅长，也很喜欢做这件事。因此，现在在新冠肺炎和封锁期间，我决定再次回来。目前只是重新学习一切，并试图从头开始建立一个网站。

在将菜单/导航链接与我的h1标题放在同一行时遇到了一些问题。尝试过所有的东西，比如ex.display:inline块；还阅读了很多这里的帖子。但似乎什么都不起作用。所以我希望这里有人有什么建议？

非常感谢！

Answer 1

如果您检查标记h1，您将看到浏览器应用于h1标记的标准页边距底部。你可以直接在检查窗口上擦除它，我想这是你的问题

Answer 2

您可以尝试创建一个包含导航项和标题的div，这应该使用display:flex和align items:center，justify内容将设置该容器内所有内容的水平对齐

然后向左浮动导航，它们应该对齐，从这里你可以添加你想要的样式

祝你好运！

.barContainer {
display: flex;
justify-content: left;
position: fixed;
width: 100%;
align-items: center;
font-family: helvetica;
}
h1 {
font-size: 15px;
}
nav {
background-position: center;
padding: 1%;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 1rem 1rem;
text-decoration: none;
font-size: 15px;
}
nav li, nav ul {
list-style: none;
}

<div class="barContainer">
<nav>
<a href="item1.html">Item 1</a>
<a href="item2.html">Item 2</a>
<a href="item3.html">Item 3</a>
</nav>
<h1>My Header</h1>
</div>

Answer 3

您可以使用float属性来浮动父元素中的元素。选择right或left可选择元素将浮动到哪一侧。使用此属性时，使用块、内联或内联块时将忽略浮动元素的display属性。

在父元素中，使用溢出：隐藏属性，使其与包含在其中的最大元素处于相同的高度。当父元素内部只有浮动元素，而不使用overflow：隐藏属性时，其高度将为0，下面的元素将与之重叠。

.content {
overflow: hidden;
font-family: sans-serif;
}
.menu {
float:right;
margin-top: 20px;
}
.menu li {
display: inline;
list-style: none;
margin: 10px;
}
h1 {
float:left;
}

<div class='content'>
<h1>My Title</h1>
<nav class='menu'>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>  
</nav>
</div>