Li标签Float:left在做网页侧栏的一些tags的时候,是一种很好的选择。
不过在中文字符换行问题上,可能会出现一点小问题,先看一张IE7和IE8下的效果图吧:
[
][1]
上图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;
}
[1]: https://www.crackedzone.cn/uploads/2012/12/li-ie7-ie8.jpg