demo如下:
<ul> <li style="float: left; list-style-type:none; width: 200px; height: 200px; background-color: red"> </li> <li style="float: left; list-style-type:none; width: 200px; height: 200px; background-color: green"> </li> <li style="float: left; list-style-type:none; width: 200px; height: 200px; background-color: yellow"> </li> </ul>
从代码中看到有3个li 元素,float: left 可以使这3个元素横向排列,list-style-type:none 可以把li 元素之前默认点号 去掉。
当然用div 标签 也可以达到相同的效果。
<div style="font-size: 0px"> <div style="width: 200px; height: 200px; background-color: red; display: inline-block"> </div> <div style="width: 200px; height: 200px; background-color: green; display: inline-block"> </div> <div style="width: 200px; height: 200px; background-color: yellow; display: inline-block"> </div> </div>
用div标签的话 要用display: inline-block 把元素横向排列。