Question

我的所有div都以左右边缘为中心垂直对齐，但是当我添加ul和li时，我的.nav开始有一个延伸过右边缘的背景颜色。知道如何锁定它吗？最大宽度不会阻止它向外流动。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

<title></title>
</head>

<body>

<div class="container">

    <div class="header">

    <img src="image/logo.png" width="155" height="110" alt="Big Box Property Preservation" />

    </div>

    <div class="navContainer">


        <div class="miniNav">

        <img src="image/link_banner.nav.png" width="189" height="44"/>

        </div>

        <div class="nav">
            <ul class="nav">
                <li><a href="URL" alt="HOME">HOME</a></li>
                <li><a href="URL" alt="ABOUT US">ABOUT US</a></li>
                <li><a href="URL" alt="OUR SERVICES">OUR SERVICES</a></li>
                <li><a href="URL" alt="CONTACT US">CONTACT US</a></li>
            </ul>
        </div>



    </div>

    <div class="content">

        <div class="contentBody">

        </div>

        <div class="sidebar1">

        </div>

    </div>

    <div class="footer" >

    </div>

</div>


</body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */

body{
    top:0;
    left:0;
    margin:0;
    padding:0; 
    background-color:#666;  
}

.container{
    position:relative;
    margin-top: 0%;
    position:relative;
    width:1000px;
    margin:0px auto;
}

.header{
    position:relative;
    float:left;
    width:900px;
    height:120px;
    background-color:#CFCA4C;
    margin:0px 50px 0px 50px;
}

.navContainer{
    position:relative;
    float:left;
    width:100%;
    height:80px;
    margin:0px 0px 0px 0px;

}

.miniNav{
    height:100%;
    position:absolute;
    right:0px;
}

.nav{
    float:left;
    max-width:900px;
    width:900px;
    height:100%;
    background-color:#FFFFFF;
    overfow:hidden;
    margin: 0 20px 0 50px;
}

ul.nav{
    list-style:none;    
    padding: 0px;
}

ul.nav li{
    display:inline;
    padding:0px;    
    float:left;
}



.content{
    float:left;
    width:900px;
    min-height:400px;
    background-color:#FFFFFF;
    margin:0px 50px 0px 50px;
}

.footer{
    float:left;
    width:900px;
    height:80px;
    background-color:#CFCA4C;
    margin:0px 50px 0px 50px;
}

Answer 1

div和ul都有类'nav'。带有类导航的UI不应该有边距（它们已经添加到div中）。所以添加：

ul.nav {margin: 0}

Answer 2

.nav {
     width: 850px;
 }

jsFiddle：http://jsfiddle.net/kongr45gpen/a5Auj/

Answer 3

你真正需要做的就是删除很多属性。

您还应该将.container设置为900px而不是1000px，因为这是其内部所有内容的宽度。

您几乎可以移除float: left和margin的所有实例。

默认情况下，块级元素（例如div s）将展开以填充可用宽度，因此您无需多次指定width: 900px。如果您float: left元素，这不是行为，但我已删除了您的实例。

因此，请注意：http://jsbin.com/ozemoy。只有一个width被设置：）

ul和li推动div不对齐

3 个答案: