html - ul 被推出 div

Question

我目前遇到的问题是我的 ul 被推出了我的 div。我已经在所有可能影响它的对象上使用了边距、边框和填充，但目前还没有成功，这是当前代码:

HTML:

            <div id="nav">
                <ul id=mainNav>
                    <li class=mainNav><a>Home</a></li>
                    <li class=mainNav><a>Products</a></li>
                    <li class=mainNav><a>Stores</a></li>
                    <li class=mainNav><a>About Us</a></li>
                    <li class=mainNav><a>Contact Us</a></li>
                    <li class=mainNav><a>Pet Pics</a></li>
                </ul>
            </div>

        </div>

        <div id="subBar">

            <div id="subNav">
            <ul id=subNavl>
                    <li class=subNav><a>Home</a></li>
                    <li class=subNav><a>Products</a></li>
                    <li class=subNav><a>Stores</a></li>
                    <li class=subNav><a>About Us</a></li>
                    <li class=subNav><a>Contact Us</a></li>
                    <li class=subNav><a>Pet Pics</a></li>
                </ul>

            </div>

        </div>  

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;
}

这是结果的屏幕截图:

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

Answer 1

http://jsbin.com/gorabonoqe/1/

我将您的代码放入 JSBin 中，看起来与您的屏幕截图并不完全相同，但我认为我能够解决您试图修复的区域(文本从黄色栏中掉出)。

这里有很多潜在的问题。对于一个，所有<a>元素的底部边距为 60px。我认为这是最让你失望的。我还更改了 #subBar 上的填充并在 #subNavl 上添加边距:0 .

查看上面的 jsbin 链接，看看是否有帮助。