css如何用ul li 排成两行两列 并且第二行合并

来源:学生作业帮助网 编辑:六六作业网 时间:2024/11/26 15:36:07
css如何用ulli排成两行两列并且第二行合并css如何用ulli排成两行两列并且第二行合并css如何用ulli排成两行两列并且第二行合并无标题文档ul,li{list-style:none;padd

css如何用ul li 排成两行两列 并且第二行合并
css如何用ul li 排成两行两列 并且第二行合并

css如何用ul li 排成两行两列 并且第二行合并




无标题文档

ul, li { list-style:none; padding:0; }
ul { width:500px; height:300px; margin:50 auto; background:#CCC }
li { float:left; height:30px; line-height:30px; margin-left:10px; background:#E6E6E6; margin-bottom:10px; }
.li1 { width:240px; }
.li2 { width:230px; }
.li3 { width:260px; }
p { margin:10px auto; }




第三个li宽240px
第三个li宽230px
第三个li宽260px

li浮动,然后设置li款酷.上面两个li加起来宽度小于ul宽度,三个li加起来宽度大于ul宽度