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