我們知道在 HTML 中列表可以分為無序列表、有序列表、定義列表。在網頁中經常可以看到無序列表的使用，例如像導航欄菜單、新聞列表、商品分類、圖片展示等，基本都是通過無序列表來實現的。

無序列表中每個列表項前面都會默認帶一個圓點符號，然而一般我們平時在網站上看到的列表樣式，通常前面是沒有圓點符號的，所以我們要如何去掉這個默認的圓點符號呢？這些都可以通過 CSS 中的列表屬性來實現。

本節要講的 CSS 中的列表屬性有下面四個：

屬性

描述

list-sytle-type

設置列表項的標記的類型

list-style-position

設置列表項標記相對于列表項內容的位置

list-style-image

將圖片設置為列表項的標記，屬性值為 url('圖片路徑')

list-style

簡寫列表屬性

list-sytle-type

list-sytle-type 屬性用于設置列表項的標記的類型，和 HTML 中列表標簽中的 type 屬性類似。

常用值屬性值如下所示：

屬性

描述

none

無標記符號

disc

默認值，實心圓

circle

空心圓

square

實心正方形

decimal

數字

在實際應用中，上述幾種屬性值用的最多的還是 none，也就是用于去掉列表項的標記。

示例：

下面是一個沒有添加任何樣式的列表：

如果我們希望去掉列表前面默認的圓點，可以通過將 list-style-type 屬性設置為 none 來實現：

ul{

list-style-type: none;

}

在瀏覽器中的演示效果：

list-style-image

list-style-image 屬性用于使用圖像來替換列表項的標記。但有一點需要注意，如果我們設置了 list-style-image 屬性，這個時候設置的 list-sytle-type 屬性將不起作用。一般為了防止某些瀏覽器不支持 list-style-image 屬性，我們會設置一個 list-style-type 屬性來替代。

示例：

例如我們將上面列表項的標記設置為一個圖像(圖片大小為50x50)，屬性值為圖像路徑：

ul{

list-style-image: url(./flower.png);

}

在瀏覽器中的演示效果：

list-style-position

list-style-position 屬性用于設置在何處放置列表項標記。

屬性值有如下所示：

屬性值

描述

outside

默認值，保持標記位于文本的左側，列表項目標記放置在文本以外，且環繞文本不根據標記對齊

inside

表示列表項目標記放置在文本內，且環繞文本根據標記對齊

示例：

例如我們可以設置兩組不同的列表，分別將 list-style-position 屬性設置為outside 和 inside 來進行對比：

CSS學習(9xkd.com)

• 第一項
• 第二項
• 第三項
• 第四項
• 第五項

• 第一項
• 第二項
• 第三項
• 第四項
• 第五項

CSS 樣式代碼：

.ul1{

list-style-position: inside;

}

.ul2{

list-style-position: outside;

}

在瀏覽器中的演示效果：

可以明顯的看到，第一組列表的標記放置在文本內，第二組列表的標記位于文本的左側。

list-style

list-style 屬性是一個簡寫屬性，是上述幾個列表屬性的簡寫形式，用于把所有列表的屬性設置在一個聲明中。

屬性設置順序為：list-style-type、list-style-position、list-style-image，也可以不設置其中某個屬性，如果不設置則采用默認值。

示例：

例如設置一個簡寫列表樣式，其中 list-style-type 屬性值為 square、list-style-position 屬性值為 inside、list-style-image 屬性值為 url(./flower.png)：

ul{

list-style:square inside url(./flower.png);

}

在瀏覽器中的演示效果：

本節我們講了 CSS 中的幾個列表樣式，一般我們用的最多的就是如何去掉列表項的默認標記，即 list-style-type:none。

總結

以上是生活随笔為你收集整理的html中正方形列表标签属性,CSS 列表样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。