float:left li中文标签在IE7中被自动折行

Li标签Float:left在做网页侧栏的一些tags的时候，是一种很好的选择。 不过在中文字符换行问题上，可能会出现一点小问题，先看一张IE7和IE8下的效果图吧： 上图IE7的效果看起来的确很蛋疼，但是在标准浏览器中是不会出现上图IE7的效果的。 首先看下CSS代码结

Li标签Float:left在做网页侧栏的一些tags的时候，是一种很好的选择。
不过在中文字符换行问题上，可能会出现一点小问题，先看一张IE7和IE8下的效果图吧：

上图IE7的效果看起来的确很蛋疼，但是在标准浏览器中是不会出现上图IE7的效果的。

首先看下CSS代码结构

.city {
    width:200px;
    border: 1px solid black;
    overflow: hidden; 
    padding: 0;
    margin:0;
}
.city li{
    float:left; 
    list-style: none; 
    margin: 5px;
}

其次是HTML结构

    
City
 
    

厦门
桂林
张家界
贵州
*
宁夏
四川
重庆
东北
北京
云南
*
华东
甘南
江西
三峡
海南
山东
青海
夕阳红
    

解决方案

其实方案很简单，就是在Li中添加一条样式 white-space: nowrap;

.city li{
    float:left; 
    list-style: none; 
    margin: 5px; 
    white-space: nowrap;
}

原文地址：float:left li中文标签在IE7中被自动折行, 感谢原作者分享。