如何让li元素在同一行显示(li元素无法在同一行显示)

这是我在做一个商城项目时候遇到的问题，我们先来看下Html代码：

         <!--   导航条开始   -->
         < div  id ="nav_box" >
             < div  id ="nav_left" >

             </ div >
             < div  id ="nav" >
                 < ul >
                     < li >< a  title ="商城大厅"  href ="#" > 商城大厅 </ a ></ li >
                     < li >< a  title ="电脑专区"  href ="#" > 电脑专区 </ a ></ li >
                     < li >< a  title ="数码相机"  href ="#" > 数码相机 </ a ></ li >
                     < li >< a  title ="手机通讯"  href ="#" > 手机通讯 </ a ></ li >
                     < li >< a  title ="会员中心"  href ="#" > 会员中心 </ a ></ li >
                     < li >< a  title ="帮助中心"  href ="#" > 帮助中心 </ a ></ li >
                 </ ul >
             </ div >
             < div  id ="nav_right" ></ div >

        </div>  <!--  导航条结束  -->

在定义导航条的时候，用无序列表（ul）定义导航条，可单个列表项（li）却总单独占一行。给了ul元素设置左浮动，也设置了宽度500px，可是li元素却依然没在同一行内 

 

 CSS代码如下：

#nav  {
    height : 73px ;
    float : left ;
    width : 930px ;
}
#nav ul  {
    float : left ;
    list-style-type : none ;
    width : 500px ;
}
#nav ul li  {
    height : 35px ;
    line-height : 35px ;    /*   让内容垂直居中   */

}

现在来取消ul元素的宽度： 

 

取消ul元素宽度后CSS代码如下： 

#nav  {
    height : 73px ;
    float : left ;
    width : 930px ;
}
#nav ul  {
    float : left ;
    list-style-type : none ;
}
#nav ul li  {
    height : 35px ;
    line-height : 35px ;    /*   让内容垂直居中   */

}

 

但是呢，这样的效果不是我想要的。我要的是列表在同一行显示，翻阅了资料发现只要把li元素设置成内联元素（inline）就可以了。翻阅了下资料，我想应该是li元素是块级元素，而块级元素是无法在同一行显示的，就像div元素一样

修改的CSS样式如下：

#nav ul li  {
    height : 35px ;
    line-height : 35px ;    /*   让内容垂直居中   */
    display : inline ;    /*   将li设置成内联元素就可以了   */

}

好了，我们来看显示效果： 

 

 

很少写博客，基本属于不写那种。主要是觉得没有自己的原创，所以就不想写。可是，现在我想尽我的一份力，好好的把我所知道的分享给那些需要的人。思维有些混乱，写的不好，语言不流畅请见谅。 

 

浏览器版本：IE7

 

 

 

 

 

转载于:https://www.cnblogs.com/MattMVP/archive/2011/08/12/2135779.html