欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

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下的效果图吧:

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

上图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;
}