css中的一些排版布局要注意的东西

最近在学做一个导航条，要实现的功能就是让导航条的内容格式不随着窗口的大小的改变而变化。

这是刚开始导航条的css代码：

.packt1{
padding: 15px;
background-color:#FFFFFF;
width:1300px;
margin-left: 55px;
}
.navbar{
height:66px;
}


.navbar-header{
float:left;
width:100px;
height:50px;
margin-left:45px;
}


.navbar-nav{
margin-left:43px;
}
.img2{
height:100%;
margin-top:2px;
}
ul li{

text-align:center;
margin-left:2px;
margin-right:2px;
float:left;
width:100px;
height:50px;
}
ul li a{

color:#000000;
text-align:center;


}
.active{
background-color:#C0C9C9;
}
.navbar-right{
margin-top: 15px;
margin-right:110px;
text-align:right;
width:110px;
height:50px;
} 
.navbar-right a{
width:50px;
height:50px;
margin-right:2px;
}

这是html代码：

 <nav role="navigation" class="navbar packt1">
        <div class = "navbar-header">
            <a href="index.html" target="_parent"> 
               <img src="../common/image/logo.jpg" alt="logo" class="img2" />
            </a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="index.html" target="_parent"> 首页 </a></li>
            <li><a href="siteeffect.html" target="_parent"> 现场效果 </a></li>
     <li><a href="other.html" target="_parent"> 其他 </a></li>
            <li class="active"><a href="index.html" target="_parent"> 首页 </a></li>
            <li><a href="siteeffect.html" target="_parent"> 现场效果 </a></li>
        </ul>
        <div class = "navbar-right">
            <a href="../user/register.html" target="_parent"> 注册 </a> &nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#" target="_parent"> 登陆 </a>
        </div>
    </nav>

这样写出来的话，存在一个Bug，就是当窗口大小缩放到一定程度的时候，本来右浮动的注册/登陆向下变动了。

原因出在如上面所示出的红色部分css属性，当最外层设置了width，下一级的div就不需要设置width了，直接对想要固定格式的元素设置width和height就ok了

将类navbar-right中的红色部分删掉，登陆/注册就可以固定在原来的位置上了