float:left li中文标签在IE7中被自动折行
程序员文章站
2022-05-10 11:04:31
...
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中被自动折行, 感谢原作者分享。