1. 程式人生 > >IE7瀏覽器float:left li標籤文字自動換行

IE7瀏覽器float:left li標籤文字自動換行

Li標籤Float:left在做網頁側欄的一些tags的時候,是一種很好的選擇。不過在中文字元上,可能會出現一點小問題,先看一張IE7和IE8下的效果圖吧:

\
 

看起來的確狠蛋疼,在標準瀏覽器中是不會出現上圖IE7的效果的。先看下程式碼結構

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


<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;   www.it165.net

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

轉自:http://www.it165.net/design/html/201212/1621.html