1. 程式人生 > >list-type-position失效

list-type-position失效

從今天起,開始正式的學習html相關內容。這是第一篇關於html的文章。每個第一次都值得記錄一下。時間2018/9/20。

一、問題描述

我在網頁裡建立了一個無序列表,據我所知,列表項的type預設值是disc,但沒有顯示。於是在內部樣式中為無序列表新增list-style-type屬性值為disc,但還是沒顯示。

在這裡插入圖片描述

二、問題解決

1、ul標籤的底層實現

在這裡插入圖片描述

2、分析程式碼
在這裡插入圖片描述
我在這裡用全域性選擇器,清除了所有元素的padding,包括ul,小圓點所在空間被清除了,形象點說“被壓扁了”,所以沒有顯示
在這裡插入圖片描述
3、解決
(1)把全域性屬性設定padding: 0; 刪去
(2)利用ul提供的設定小圓點位置的樣式屬性list-style-position
list-style-position:outside(預設值,小圓點放在padding區域)
list-style-position:inside(小圓點放在li內)
在這裡插入圖片描述