ul li 列點縮排

之前遇過將 ul li 放在區塊內，發現使用 CSS Reset 後，列點是在區塊外的
示意範例
後來查了一下，找到此調整列表縮排，文章中提到是因瀏覽器處理列表時， marker ( 列點 ) 是在 element 的外
然後因 ul li 自適應外容器的寬度，因此導致列點在容器外（自己推測 XD

因此要在 ul 或 li 設定 padding-left 才會將列點往內推

或是使用 list-style-position: inside 調整列點的位置到 li 內
不過這個比較少看到使用，且文章提到各瀏覽器對於 list-style-position: inside 的處理上有差異，因此看起來比較簡單的方法是使用 padding 或 margin 推移 ul 或 li 的空間

ul li 與 p

根據 規範 ，列表元素像是 ol ul，不能是 p 的子元素，因此若有一文字段落包含條列式內容：

For instance, this fantastic sentence has bullets relating to

• wizards,
• faster-than-light travel, and
• telepathy,

and is further discussed below.

結構建議寫法為：將 p 段落分開表示，與中間的 ul li 是同層

<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
 <li>wizards,</li>
 <li>faster-than-light travel, and</li>
 <li>telepathy,</li>
</ul>
<p>and is further discussed below.</p>

若覺得兩個 p 段落中的文字內容斷句怪怪的，也可以使用 div 包 ul li，讓文字較連貫:

<div>
For instance, this fantastic sentence has bullets relating to
<ul>
 <li>wizards,</li>
 <li>faster-than-light travel, and</li>
 <li>telepathy,</li>
</ul>
and is further discussed below.
</div>

參考資料：
4.4 Grouping content — HTML5
調整列表縮排
list-style-position - CSS: Cascading Style Sheets | MDN