css li 2px的空,ul的两个li之间空出了三个li的位置_html/css_WEB-ITnose

当前位置：Gxlcms > html代码 > ul的两个li之间空出了三个li的位置_html/css_WEB-ITnose

ul的两个li之间空出了三个li的位置_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：31人阅读

css布局 ul 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的位置的奇怪景象。如图：

请各位指点迷津。

回复讨论(解决方案)

因为你第三个li高度比第四个大，由于是float：left，所以后面的会紧贴着左边显示，你第三个凸下来了，第五个就挡在那边了，第五个右边没地方了，所以第六个又贴着左边显示了

多谢了，就是这个原因。