<html>
<meta charset="UTF-8" />
<head>
<title></title>
</head>
<style type="text/css">
* {
margin: 0
padding: 0
}
li{list-style: none}
.demo li{float: leftborder: 1px solid #000000width: 50pxtext-align: centerbox-sizing: border-box}
.list li{margin-left: 10px}/*左外边距10px*/
</style>
<body>
<div class="demo">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
应用浮动+margin在IE6会出现双倍距离的现象，注意 只是出现在IE6中，通常这种现象可以用_margin来解决，即针对IE6的hack。你所纠缠的display问题，并不是只有两种显示方式inline和block，还有许多其它的display值，譬如inline-block，你可以试一试。在应用了float之后，无论块级元素还是行内元素都会宽度自适了（当然你没有设定宽度的情况下），就形似inline-block...
使用float来使层浮动起来，使用clear:both来清除浮动，一般情况下在一个div中，会有三个层，第一个层左浮动，第二个层右浮动，第三个层用来清除浮动。最外层的层要使用：overflow:hidden来使外边框达到内层浮动层的高度。
