有时候我们想写个浮动得到这样的效果：
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;
padding:0;}
a{
text-decoration:none;
color:#333333;
line-height:1.7em;}
.main_c{
list-style:none;
font-size:14px;
width:400px;
height:50px;}
.main_c li{
float:left;
margin-right:10px;
}
</style>
</head> <body>
<ul class="main_c">
<span style="white-space:pre"> </span><li><a href="#">豪门替身：总裁别嚣张</a></li>
<span style="white-space:pre"> </span><li>|</li>
<span style="white-space:pre"> </span><li><a href="#">蛮荒征战:唯我称王</a></li>
<span style="white-space:pre"> </span><li>|</li>
<span style="white-space:pre"> </span><li><a href="#">毒妇重生：惩恶妹斗渣男</a></li>
<span style="white-space:pre"> </span><li>|</li>
<span style="white-space:pre"> </span><li><a href="#">最强兵王：我的靠山最硬</a></li></ul>
</body>
</html>
可是在IE7和IE6下得到的结果却是这样的：
解决办法很简单，给li标签加一个white-space属性即可：
<span style="font-size:18px;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;
padding:0;}
a{
text-decoration:none;
color:#333333;
line-height:1.7em;}
.main_c{
list-style:none;
font-size:14px;
width:400px;
height:50px;}
.main_c li{
float:left;
margin-right:10px;
white-space:nowrap;}
</style>
</head> <body>
<ul class="main_c">
<span style="white-space:pre"> </span><li><a href="#">豪门替身：总裁别嚣张</a></li>
<span style="white-space:pre"> </span><li>|</li>
<span style="white-space:pre"> </span><li><a href="#">蛮荒征战:唯我称王</a></li>
<span style="white-space:pre"> </span><li>|</li>
<span style="white-space:pre"> </span><li><a href="#">毒妇重生：惩恶妹斗渣男</a></li>
<span style="white-space:pre"> </span><li>|</li>
<span style="white-space:pre"> </span><li><a href="#">最强兵王：我的靠山最硬</a></li></ul>
</body>
</html>
</span>
white-space：设置如何处理元素内的空白
可能的值
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |