0
我已经浏览了几个关于这个问题;然而，他们似乎都没有解决或解决这个问题。h1和导航元素拒绝正确排队
实质上发生的事情是，h1和nav元素并排结束，但没有正确排列。我已经尝试了多个显示和浮动设置，但都没有工作。
CSS本身相对干净，也许flex不能正常工作，或者我没有正确使用它？我不确定什么导致这里的问题帮助非常感谢！
/* Mobile CSS */
#navbar h1 {
display: block;
padding-top: 1.4rem;
text-align: center;
font-weight: 400;
}
#hbmenu {
display: block;
position:absolute; top:1.8rem; left:2rem;
background-color: transparent;
border: none;
}
.iconbar {
display: block;
margin-top: 5px;
height: 3px;
border-radius: 3px;
width: 30px;
background-color: #888;
}
#hbmenu:hover .iconbar {
background-color: #fff
}
#navbar > nav {
display: flex;
flex-direction: column;
background-color: white;
transform: 300ms all ease;
}
#navbar > nav > ul {
margin: 0 auto;
flex: 1;
text-align: center;
list-style-type: none;
}
#navbar > nav > ul > li {
border-bottom: 1px solid rgba(51,51,51,0.4);
}
#navbar > nav > ul > li > a {/*border bottom none?*/
display: block;
padding: 1.2rem 0;
text-decoration: none;
transition: 250ms all ease;
}
/* Medium screens or Desktop screens */
@media all and (min-width: 600px) {
#hbmenu {
display: none;
}
#navbar h1 {
display: inline-block;
padding-left: 2rem;
}
#navbar > nav {
display: inline-block;
padding-top: 2.1rem;
background-color: #333333;
}
#navbar > nav > ul {
padding-left: 1.8rem;
}
#navbar > nav > ul > li {
display: inline-block;
}
#navbar > nav > ul > li > a {
padding: 0 0.5rem;
margin: 0 0.5rem;
color: #9D9D9D;
border-top: 1.5px solid transparent;
border-bottom: 1.5px solid transparent;
transition: 0.5s;
}
#navbar > nav > ul > li > a:hover {
border-bottom: 1.5px solid #fff;
color: #fff;
transition: 0.5s;
}
}
/* Color & Font Stuff */
#navbar > nav > ul > li > a {
font-family: "Helvetica Neue";
font-weight: 600;
}
.highlight {
color: #9D9D9D;
transition: 0.5s;
}
.highlight:hover {
color: #ffffff;
transition: 0.5s;
}<header>
<div id="navbar">
<button type="button" id="hbmenu">
<span class="iconbar"></span>
<span class="iconbar"></span>
<span class="iconbar"></span>
</button>
<h1>
<span class="highlight">Gatsby</span>
</h1>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Test</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</nav>
</div>
</header>
取出h1元素允许我适当地添加填充到导航元素的顶部。而只有这两个人才能让我正确地填充h1。我相信填充不是垂直居中的最佳方式，但问题仍然存在。
UPDATE：
我赶紧打上了其希望澄清这一问题的屏幕截图。底部的红线显示文本当前的排列方式。虽然顶部的红线表明li元素应该如何垂直居中。
由于这表明也许更大的问题是如何其目前设置的元素没有，如果你将“捕捉”。
以何种方式不都排队？ – sol
使用开发人员工具，您可以在其中查看边距和填充。标题标签和导航标签可能不同。这可能是问题 –
你想达到什么目的？ – Felix