怎麼去掉li、ul等前面的點及如何去掉空格的方法

[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]不過值得注意的是，各瀏覽器對margin的解釋不同，在IE下是這樣的，在FF下可能完全是另一個樣子。所以如果真的需要顯示這個圓點的話，可以用background來設置。其他幾點DIV+CSS設計參考建議：div最好只用在大部區塊細部的地方盡量別用divh1標題在一個頁面最好只出現一次次標題就用h2段落標題用h3以此類推不是屬於資料的圖片盡量以背景插入的方式來呈現如果真有心邁向標準style="..."這個東西就盡量別用img標籤記得加上alt=""外一篇拓展參考學習：如何應用ul、li標籤 創建css橫嚮導航菜單？　　我們製作導航條按照傳統的方法由放在一行表格單元里的圖形圖像構成，或者由單元格內的文字所組成，由於人們不再推薦用表格來定位任何非表格的頁面內容，所以很多製作Web的人正在尋找新的方法，用結構化的XHTML標記和CSS格式來創建導航條。這樣的創建方式也更對搜索引擎蜘蛛友好，這對我們來說是非常重要的。　　創建CSS樣式文本導航條的最簡單解決方法也許就是把所有的鏈接都放在一行文本里，這種方法看起來很合理也很直觀。但問題在於把所有的鏈接都放在一行文本里就很難控制鏈接之間以及前後的空白。所以，為了避免所有的鏈接都擠在一起，你最後通常都不得不插入一些東西或者非換行的空白字元作為分隔，讓這些文字分離開來，不至於混在一起。但這樣有意義嗎？　　現在我們正常的做法是應用ul、li標籤把鏈接作為無序列表（unordered list）來標識。再應用CSS樣式對其進行控制，按我們預想的形式在容器中顯示出來。對導航條使用無序列表似乎是不符合直觀感受的，因為我們習慣於把無序列表作為一個豎著推起來的列表項目，每個前面都放著一個列表預設標記。這似乎不符合導航條水平方向的習慣。但作為獨立列表項目集合的列表邏輯結構能夠適用於導航條里的鏈接；而CSS的規則讓你能夠強製取代列表項目預設的表現形式，以消除它們並安排列表項在容器內按水平方向排列，而不是從上而下的規則。現在讓我們來看看實例，根據無序列表創建CSS樣式和XHTML標籤的橫嚮導航菜單。

我們看看下面的xhtml代碼：複製內容到剪貼板程序代碼 程序代碼

　　我們再看看關於這段xhtml的CSS代碼：複製內容到剪貼板程序代碼 程序代碼#nav { height: 30px; width: 100%; background-color: #c00;}#nav ul { margin: 0 0 0 30px; padding: 0px; font-size: 12px; color: #FFF; line-height: 30px; white-space: nowrap;}#nav li { list-style-type: none; display: inline;}#nav li a { text-decoration: none; font-family: Arial, Helvetica, sans-serif; padding: 7px 10px; color: #FFF;}#nav li a:hover { color: #ff0; background-color: #f00;}　　我們來看看上面的代碼的運行效果：HTML代碼

[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]　　或許你並不能完全理解這些代碼都是什麼意義，都用來控制什麼，達到什麼效果。　　下面我們來解析上面的代碼：　　xhtml代碼首先定義了一個容器div id="nav"。這個容器用來放置這個無序列表橫嚮導航菜單的內容，但也有人認為這個容器是多餘的，直接定義ul id="nav"就可以了。我們不建議你這樣做，要知道我們的站點是可擴展的，我們要為將來的擴展留有足夠的餘地，如果我們的導航樣式設計的更加複雜，僅有的ul是不能滿足需要的。我們定義這樣的容器也更符合我們編寫代碼的習慣。　　#nav定義了窗口的寬高及背景顏色。#nav ul包含有margin和padding聲明，字體及顏色聲明。line-height: 30px;是非常重要的定義，如果取消掉行高的定義，我們的鏈接文字垂直居中就可能受到影響。white-space: nowrap;或許大家並不能理解有什麼作用，它定義了強制在同一行內顯示所有文本，直到文本結束或者遭遇br對象。關於white-space屬性可以參考這裡。　　#nav li中的list-style-type: none;去除了列表項所使用的預設標記。使其更象是純文本，而沒有列表標記。display: inline;聲明則能夠讓列表項目在頁面上從左向右浮動，而不會讓每個項目顯示在單獨的行里而從上至下的排列。這兩項聲明是我們實現無序列表橫嚮導航菜單的關鍵。　　#nav li a和#nav li a:hover定義了鏈接的樣式。其中的內容就不作深入了，唯一要講的就是：padding: 7px 10px;它是用來控制鏈接文字之間的空白間隔的，你可以試著改變數值試試看。　　至此，無序列表創建css橫嚮導航菜單的工作就結束了。

在CSS中經常會使用到li標籤，默認情況下使用li時，會在文字前面自動加上一個黑色的小圓點，有時候會覺得這個圓點多餘，所以要去掉。下面介紹幾種常用的方法。

方法一：

百度

雅虎

新浪

谷歌

方法二：

li {list-style-type:none;}

百度

雅虎

新浪

谷歌

方法三：

.li_style {list-style-type:none;}

百度

雅虎

新浪

谷歌

ul li{list-style-type: none;} 這個是去點的，不過一般網頁都會在li的前面加上一個自己做的背景點，這個就去不掉了，你可以試試ul li {background:none;}。不要複製，我這裡面有漢語的標點

li { display: inline;}body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}-->

sds

如何去掉LI列表前面的空白！ 去掉LI前面的圓點，使用了list-style-type: none;不過前面出現了空白，無法消除，使用0margin,0padding也無效。可以用.ul{ list-style-type:none; padding:0; margin:0;} 試試看去掉圓點的LI:

測試

(責任編輯：laiquliu)