在做網頁編排最常見的問題就是CSS的list-style-type無法產生中文數字如一、二、三，如果直接吧內文加上中文數字沒段行還好，字太多時會分切兩行，第二行的文字開頭會對齊左邊基線，像下圖這樣 如果有強迫症的人看了會很不舒服，解決方法就是吧內文的一、二、三拿掉，然後再標題的dt標籤用before建構內容+nth-child()判斷列數產生一、二、三，就可以做出像以下的排版方式，第二行由數字後開始顯示。 這樣就美觀多了~遇到處女座的客戶也不會有問題，製作方法如下 1、HTM:結構吧內文標題的一、二、三拿掉 (紅字為標題) <dl> <dt>以學生為中心：發展以學生為中心，教學優先的核心價值。培養學生新三好運動。</dt> <dd> 1.把書讀好：養成終生學習的能力<br /> 2.身要練好：養成終生運動的能力<br /> 3.人要做好：養成終生反省的能力 </dd> <dt>以專業為依歸：教師有專業、行政有效能。</dt> <dd> 1.活力行政：力持「依法行政、穩健成長」的經營要領。<br /> 2.專業教師：提升教師教學專業能力，形塑專業形象。<br /> 3.建立專業社群之學校文化，建立團隊學習機制，以專業對話、團隊學習的機制，落實教學品質保證。 </dd> <dt>愛、榜樣與熱誠：打造「溫馨校園、全人教育、終身學習」的辦學環境。</dt> </dl> 2、CSS部分加上以下CODE dt{ position: relative; font-size: 115%; padding: 10px 0px 10px 50px; color: #174960; line-height: 170%; } dt:nth-child(1)::before{ position: absolute; left: 0px; content:"一、"; } dt:nth-child(3)::before{ position: absolute; left: 0px; content:"二