首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

ul的两个li其间空出了三个li的位置

2013-06-19 
ul的两个li之间空出了三个li的位置页面上用ul li 显示用户列表,不使用默认样式,li横向显示。主要样式如下:

ul的两个li之间空出了三个li的位置
页面上用ul li 显示用户列表,不使用默认样式,li横向显示。
主要样式如下:
 #ul_stuList {
        list-style: none;
        margin: 0px 0px 0px 0px;
        padding: 0px;
    }

        #ul_stuList li {
            float: left;
            margin-right: 16px;
            margin-top: 16px;
            /*background-color: #a2b93e;*/
            background-color: lightgray;
            color: white;
            /*padding: 5px;*/
            border-radius: 4px;
        }

            #ul_stuList li:hover {
                /*background-color: purple;*/
                background-color: #f7c434;
                cursor: pointer;
            }

            #ul_stuList li.liActive:hover {
                background-color: #e58e3c;
                cursor: pointer;
            }

        #ul_stuList .liActive {
            background-color: #e58e3c;
        }
li是后台取数据回来拼接字符串后设置   $("#ul_stuList").html(stuHtml); 加进去的。
但现在出现了两个li之间空出了三个li的位置的奇怪景象。如图:
ul的两个li其间空出了三个li的位置
请各位指点迷津。 css布局 ul?li?
[解决办法]
因为你第三个li高度比第四个大,由于是float:left,所以后面的会紧贴着左边显示,你第三个凸下来了,第五个就挡在那边了,第五个右边没地方了,所以第六个又贴着左边显示了

热点排行