軟件 聊天 安全 視頻 瀏覽器 下載 系統 辦公 教學 輸入法
免費 域名 空間 相冊 郵箱 資源 網賺 試用 優惠 工具
教程 設計 三維 學院 辦公 網頁
素材 PSD 矢量 網頁 PPT 動畫
美女 唯美 大生活 美圖 風景 時尚藝
資訊 新聞 專題 熱點
您的位置: 廣信之家 > 網絡學院 > 建站資訊 > 文章正文

li浮動時ul高度為0,解決ul自適應高度的幾種方法

時間:10-12 01:38 來源:廣信之家 整理:廣信小編 我要評論(0)
字號:T|T
內容提要:
  li浮動時ul高度為0,解決ul自適應高度的幾種方法 在網頁設計中,常常需要對li標簽做浮動效果,但是在不同瀏覽器中會遇到兼容性問題,比如IE中會出現ul高度為0的情況,是效果不能達到預期效果。那么這里我就來講解一下解決這個問題的幾種方法。

在網頁設計中,常常需要對li標簽做浮動效果,但是在不同瀏覽器中會遇到兼容性問題,比如IE中會出現ul高度為0的情況,是效果不能達

到預期效果。那么這里我就來講解一下解決這個問題的幾種方法。

1.給ul元素設置高度height
最直接的辦法是給ul元素設置一個高度,即ul標簽添加height屬性,代碼如下:

ul {
    list-style-type: none;
    height: 30px; /*添加高度屬性*/
}

次方法有個缺點:就是元素的高度不能自適應內容。

2.添加一個空的div
添加一個空的div,這個div和浮動元素同一級別,且位于浮動元素的最后。這個方法必須要為這個div添加一個clear:both屬性,代碼如下:

<ul>
<li>標簽1</li>
<li>標簽2</li>
<li>標簽3</li>
<div style="clear:both;"></div> <!--新添加的空div,它和浮動元素同一級別,且位于最后-->
</ul>

3.添加zoom屬性,適用于IE

IE支持一個CSS屬性zoom,當定義了這個屬性之后在 IE 瀏覽器里面就會自動適應高度了。設置為zoom:1,代碼如下:

ul {
    list-style:none;
    zoom:1; /* 適用于IE */
}

通過這幾種方法基本可以解決元素的高度不能自適應內容。

    相關閱讀:

    頂一下
    (0)
    0%
    踩一下
    (0)
    0%
    免責申明:以上內容僅代表原創者觀點,其內容未經本站證實,li浮動時ul高度為0,解決ul自適應高度的幾種方法對以上內容的真實性、完整性不作任何保證或承諾,轉載目的在于傳遞更多信息,由此產生的后果與li浮動時ul高度為0,解決ul自適應高度的幾種方法無關;如以上轉載內容不慎侵犯了您的權益,請聯系我們將會及時處理。
    [責任編輯:廣信小編]

    精彩圖文

    登錄 (請登錄發言,并遵守 相關規定)
    如果你對廣信之家有任何意見或建議,請到交流平臺反饋。到留言板反饋
    36选7中奖概率