上面为效果图，用ul、li的方法详细写法：
css代码：
.demoBox {
width:204px;
}
.demoBox li {
float: left;
width:100px;
border: 1px solid #999;
}
.demoBox li.demoLi {
width: 202px;
}
html代码：
总体思路就是利用宽度和浮动来实现，给ul一个固定的宽度，第一行显示的li平分这个宽度，后面的li因为没有位置就自动去了第二行，让它独占一行，就可以实现这个效果。
以上，希望对你有帮助。
这是我写的源代码，你看下，并共享给其他网友，主要用到了display:inline-block;
内容全部来源于网络收集，如有侵权，请联系网站删除：QQ：24596024