首頁 > 開發者 > JavaScript

ul li設定橫排，併除去li前的圓點，ulli

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

ul li設定橫排，併除去li前的圓點，ulli

效果預覽：http://hovertree.com/texiao/css/

如何用CSS製作橫向菜單 讓ul li橫向排列及圓點處理 

我們先建立一個無序列表，來建立菜單的結構。代碼是：

<ul><li><a href="http://hovertree.com/">首頁</a></li><li><a href="http://hovertree.com/map/">網站地圖</a></li><li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li><li><a href="http://hovertree.com/menu/texiao/">特效</a></li><li><a href="http://cms.hovertree.com/">CMS線上預覽</a></li><li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery圖片列表滑鼠經過遮罩顯示文字</a></li><li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li></ul>

效果是：

    • 首頁
    • 網站地圖
    • HoverTreeCMS
    • 特效
    • CMS線上預覽
    • jQuery圖片列表滑鼠經過遮罩顯示文字
    • 原文

第二步：隱藏li的預設樣式，去掉圓點
因為看起來不是很好看，菜單通常都不需要li預設的圓點，我們給UL定義一個樣式來消除這些圓點。

當然，為了更好的控制整個菜單，我們把菜單放在一個div裡。頁面代碼變成：

<style>.hvtulli22 ul{list-style:none;}</style><div class="hvtulli22"> <ul><li><a href="http://hovertree.com/">首頁</a></li><li><a href="http://hovertree.com/map/">網站地圖</a></li><li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li><li><a href="http://hovertree.com/menu/texiao/">特效</a></li><li><a href="http://cms.hovertree.com/">CMS線上預覽</a></li><li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery圖片列表滑鼠經過遮罩顯示文字</a></li><li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li></ul></div>

CSS定義為：

.hvtulli22 ul{list-style:none;} 
說明：“.hvtulli22 ul”表示我要定義的樣式將作用在hvtulli的層裡的ul標籤上。

現在的效果是沒有圓點了：

首頁

網站地圖

HoverTreeCMS

特效

CMS線上預覽

jQuery圖片列表滑鼠經過遮罩顯示文字

原文

 

第三步：關鍵的浮動
這裡是菜單變成橫向的關鍵，我們給li元素加上一個“float:left;”屬性，讓每個li浮動在前面一個li的左面，margin-left:10px 使li之間間隔10像素。

CSS定義為：

.hvtulli li{float:left;margin-left:10px} 
效果是：http://hovertree.com/texiao/css/

看，菜單變橫向了。就這麼簡單！下面需要做的就是最佳化細節了。

HTML檔案代碼：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>ul中li橫排，除去li前的圓點，li之間間隔-何問起</title><base target="_blank" /><meta charset="utf-8" /><style>.hvtulli ul{list-style:none;} .hvtulli li{float:left;margin-left:10px}</style></head><body><div><h2>何問起</h2><h3>ul中li橫排，除去li前的圓點，li之間間隔</h3> </div><div class="hvtulli"><ul><li><a href="http://hovertree.com/">首頁</a></li><li><a href="http://hovertree.com/map/">網站地圖</a></li><li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li><li><a href="http://hovertree.com/menu/texiao/">特效</a></li><li><a href="http://cms.hovertree.com/">CMS線上預覽</a></li><li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery圖片列表滑鼠經過遮罩顯示文字</a></li><li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li></ul></div> </body></html>

js,jquery,css,html5特效 http://www.cnblogs.com/roucheng/p/texiao.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More