Html ul被推出div

我目前遇到一个问题，我的ul被从我的div中推出。我在所有可能影响它的对象上使用了边距、边框和填充，但没有成功。以下是当前代码：

HTML:

下面是结果的屏幕截图：

---

如果有人能帮我解决这个问题，我将不胜感激。

您将该div、subBar的高度设置为20px，浏览器将遵守该设置。

只是想让您知道。。当您使用ul>li>a时

ul{
    list-style: none;
    list-style-type: none;
    margin : 0;
    padding: 0;
}
ul > li{
   display : inline-block; 
}
ul > li > a{
   display: block;
   height: 100%;
}

这种方式将使您的ul代码中的一切变得简单

我把你的代码放在一个JSBin中，看起来和你的截图不太一样，但我想我能够找到你试图修复的区域，文本从黄色条中掉了出来

这里有很多潜在的问题。首先，所有元素的底边都是60px。我想这是最让你失望的。我还更改了subBar上的填充，并在subNavl上添加了边距：0

---

看看上面的jsbin链接，看看这是否有用

我猜这是因为您正在将显示更改为内联的变体。ul自然是一个块级元素，除非您知道如何使用display，否则应该保持这种状态。您可以创建一个jsfiddle.net吗？我还注意到在html的第13行有一个结束div标记，没有开始标记。谢谢我复制了你的CSS版本，它似乎工作正常，但我仍在努力想到底是什么导致的。再看一遍，我认为另一件让你不舒服的事情是subNavl元素是a，默认情况下它有一个上边距。浏览器都提供HTML元素的默认样式。这也导致潜艇导航下降。虽然我的回答可能直接修复了您的代码，@Mohamed Yousef的回答也是正确的，并且说明了在导航样式方面的最佳实践。如果你想了解更多关于CSS的信息，这个网站是一个很好的资源

#header{
    width:1000px;
    background-color:#B443B7;
    border-radius:200px;
    height:50px;
    margin:auto;
    margin-top:0px;
    margin-bottom:opx;
    }


h1{
    display:inline;
    color:white;
    margin-left:20px;
    font-family: 'Indie Flower', cursive;
    }

h1, a{
    text-decoration:none;
    color:#B443B7;  
    margin-top:auto;
    margin-bottom:60px;
    }



    #subBar {
        height:20px;
        padding-top:10px;
        width:875px;
        margin-right:auto;
        margin-left:auto;
        background-color:#F4F459;
        color:black;
        border-radius: 0px 0px 200px 200px;

        }

#nav {
    margin:auto;
    }

#subNav {
    margin:auto;    
}

#mainNav {
    list-style-type:none;
}

.mainNav {
    display:inline

}

.mainNav a {
    display:inline-block;
    height:35px;
    padding-top:15px;
    color:white;
    width:100px;
    text-align:center;
    font-family:arial, sans-serif;
    font-size:16px;
}

.mainNav a:hover{
    background-color:#F4F459;
    color:black;
}

#subNavl {
    list-style-type:none;
}

.subNav {
    display:inline

}

.subNav a {
    display:inline-block;
    height:30px;
    margin-top:0px;
    padding-top:0px;
    color:black;
    width:80px;
    text-align:center;
    font-family:arial, sans-serif;
    font-size:16px;
}

ul{
    list-style: none;
    list-style-type: none;
    margin : 0;
    padding: 0;
}
ul > li{
   display : inline-block; 
}
ul > li > a{
   display: block;
   height: 100%;
}