如何在 Html 呈現如同 word 中式編號格式。

使用情境   

在 Html 格式中，如果我們要呈現編號格式，會用到 ul li 列表語法如下:

<ul>
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
...
</ul>

呈現的結果如下:

項目一
項目二
項目三

但有時我們想呈現如同 word 中式編號格式如下:

一、這是測試
        (一)這是測試
              1.這是測試

這時就無法像上面那樣用 ul li 列表語法來實現，並需自行手動建立，且當編號文字換行時，無法像 word 一樣，可以自動縮排，如同下面所示。

但在 Html 是實際上會變成下面的狀況。

一、這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試
(一)這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測
1.這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試

如果每一段落都用空白鍵自行修改為 word 上的模式太費工，這時可以用 CSS 進行段落文字縮排、凸排設定，需要用到 margin-left 及 text-indent 兩個語法，首先在必需用<style> </style>區，進行設定。

<style type="text/css">

.tab { margin-left: 40px;

text-indent: -34px;}

.subtab { margin-left: 80px;

text-indent: -34px;}

</style>

在使用於文字時，以下列方式使用:

<p class="tab">一、這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試</p>

<p class="subtab">(一)這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試</p>

所呈現的結果如下所示:

一、這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試

(一)這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試這是測試

設定說明

在<style>區定義兩個 class 為 tab 及 subtab ，分別對應編號一、及(一)的格式，兩個 class 的設定如下:

• tab class:

先使用 margin-left 設定整個段落由左向右偏移 40px，來提供編號一、凸排提供空間，如沒設定 margin-left，整個文字將會突出畫面，再使用 text-indent 設定段落第一行凸排 -34 px(由右向左)。

 margin-left: 40px;

 text-indent: -34px;

• subtab class:

 此 class 是設定編號(一) 排列方式，因編號(一)要較編號一、要再多往右縮排一、的位置，大約40px的距離，加上原來40px，總共用偏移80px，而text-indent 設定則維持原先設定。

 margin-left: 80px;

 text-indent: -34px;

上面偏移的距離，可依字型大小及個人需求進行調整。在<style>區段設定好後，在使用時於段落設定 <p>中加上  class="tab" 或 class="subtab"字樣即可，如下所示:

<p class="tab"> 一、這是測試。</p>

<p class="subtab"> (一)這是測試。</p>

結語

在 word 編輯的文件中，有用到中式的編號系統，要移植到網頁上時，因 Html 不支持，無法直接複製，需要上面所述的 CSS 設定，調整格式來符合我們的需要，如有需要的朋友，可以依上面的設定方式，來調整網頁格式。