首頁 >php教程 >php手册 >float:left li中文标签在IE7中被自动折行

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

WBOY
WBOY原創
2016-06-06 20:08:071323瀏覽

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结构

<div class="box">
    <h3>City</h3> 
    <ul class="city">        
        <li>厦门</li>
<li>桂林</li>
<li>张家界</li>
<li>贵州</li>
<li>新疆</li>
<li>宁夏</li>
<li>四川</li>
<li>重庆</li>
<li>东北</li>
<li>北京</li>
<li>云南</li>
<li>西藏</li>
<li>华东</li>
<li>甘南</li>
<li>江西</li>
<li>三峡</li>
<li>海南</li>
<li>山东</li>
<li>青海</li>
<li>夕阳红</li>
    </ul>  
</div>

解决方案

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

.city li{
    float:left; 
    list-style: none; 
    margin: 5px; 
    white-space: nowrap;
}
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn