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

以下是结果的屏幕截图：

enter image description here

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

Answer 1

只是为了让你知道..当你使用ul＆gt; li>一个

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代码变得简单

Answer 2

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

我把你的代码放在一个JSBin中，看起来并不像你的截图，但我想我能够解决你试图修复的区域（文本从黄色栏中掉出来）。

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

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

Answer 3

你将div的高度#subBar设置为20px，浏览器就是这样。

ul被推出了div

3 个答案: