Html 如何将这个分区固定到另一个分区？它'；是导航条，它赢了'；t垂直对齐

对于n00b的问题，很抱歉，下面是：

如屏幕截图所示，我无法将文本列表项与导航栏对齐。参考代码，这样你就能明白我在说什么。这有点乱，但我基本上拥有的是一个主分区，它控制着其他分区，试图让它们“有条理”

如果有人能帮忙，那就太好了。谢谢

屏幕截图此处：

HTML

<div class="masterwrappernav">
    <div class="abovenav">
        <div class="logowrappers">
            <div id="logo">
                <a href="index.html"><img src="img/logo.png"></a>
            </div>
            <div id="slogan">
                <img src="img/1pyramid.png">
            </div>
        </div>
    </div>
    <div class="headernav">
        <div class="nav">
            <ul>
                <li><a href="index.html" style="text-decoration:underline; color:#003B57;">Home</a></li>
                <li><a href="about/index.html">About</a></li>
                <li><a href="articles/index.html">Articles</a></li>
                <li><a href="devotions/index.html">Devotions</a></li>
                <li><a href="biblestudy/index.html">Bible Study</a></li>
                <li><a href="schedule/index.html">Schedule</a></li>
                <li><a href="store/index.html">Merchandise</a></li>
                <li><a href="contactus/index.html">Contact Us</a></li>
                <li><a href="donations/index.html" style="border-right:1px solid">Donations</a></li>
            </ul>
        </div>
    </div>
</div>  

---

感谢Advanced

您的

.headernav

上有一个固定的

高度
为
40px
。“自动高度”可以解决对齐问题

.headernav {
    height: auto;
}

否则，如果您想要
.headernav
的精确
40px
高度，可以使用下面的代码段-

.nav ul {
    margin-top: 5px;
}
.nav ul li a:link {
    padding-top: 0;
    padding-bottom: 0;
}

你在胡乱摆弄“位置：绝对”；而不需要IMHO和你的UL/LI获得一些自动分配的边距/填充-使用重置！
寻找解决方案的可能方法

CSS:

HTML:












谢谢，我真的很好奇为什么我需要写“页边距顶部：5px；”。它可以工作，我只是不知道为什么
ul
浏览器有一个默认的边距。在谷歌浏览器中，它是
1em
。我只是将其改写为
5px
，以便更好地对齐。尝试给出
0px的
margin top
，您将看到链接正在接触导航的上边缘。
.nav ul {
    margin-top: 5px;
}
.nav ul li a:link {
    padding-top: 0;
    padding-bottom: 0;
}

.masterwrappernav
{
background-color:#11120D;
height:180px;
margin:0 auto;
}
.abovenav
{
background-color:#f7f7f7;
height:140px;
margin:0 auto;
box-shadow: 1px 1px 18px #D6D6D6;
}
.headernav
{

background-color:#f7f7f7;
height:40px;
width:100%;
box-shadow: 1px 1px 10px #212121;
text-align:center;
}

.nav
{

    margin: 0 auto;
}
.nav ul { margin: 0; padding: 0; }
.nav li { margin: 0; padding: 0; }
.nav ul li
{
display:inline;
font-family: sans-serif;
font-size:19px;
    height: 40px;
    line-height: 40px;
}
.nav ul li a:link
{
border-left:1px solid;
padding:9px 1%;
background-color:#f7f7f7;
color:#454443;
text-decoration:none;
}

<div class="masterwrappernav">
    <div class="abovenav">
        <div class="logowrappers">
    <div id="logo"><a href="index.html"><!--<img src="img/logo.png" alt="LOGO">--></a></div>
    <div id="slogan"><!--<img src="img/1pyramid.png" alt="PYRAMID">--></div>
        </div>
    </div>
    <div class="headernav">
        <div class="nav">
            <ul>
                    <li><a href="index.html" style="text-decoration:underline; color:#003B57;">Home</a></li>
                    <li><a href="about/index.html">About</a></li>
                    <li><a href="articles/index.html">Articles</a></li>
                    <li><a href="devotions/index.html">Devotions</a></li><li><a href="biblestudy/index.html">Bible Study</a></li>
                    <li><a href="schedule/index.html">Schedule</a></li>
                    <li><a href="store/index.html">Merchandise</a></li>
                    <li><a href="contactus/index.html">Contact Us</a></li>
                    <li><a href="donations/index.html" style="border-right:1px solid">Donations</a></li>
            </ul>
        </div>
    </div>
    </div>