9三月/120

使用 CSS 來做階層清單

前言

前陣子客戶希望清單可以像 Word 有階層，一開始我還說不可以，後來花了點時間尋找，發現原來只需要靠 CSS 就可以完成啦！只是因為不支援 IE6 和 IE7 只好找別的方式囉！不過如果不需要支援 IE6 和 IE7 的話，可以考慮使用這種方式來做喔！

說明

首先先準備好我們要呈現階層的清單 HTML

<ol>
    <li>第1個項目
        <ol>
            <li>第1個子項目</li>
            <li>第2個子項目</li>
            <li>第3個子項目</li>
        </ol>
    </li>
    <li>第2個項目
        <ol>
            <li>第1個子項目</li>
            <li>第2個子項目</li>
            <li>第3個子項目</li>
        </ol>
    </li>
    <li>第3個項目
        <ol>
            <li>第1個子項目</li>
            <li>第2個子項目</li>
            <li>第3個子項目</li>
        </ol>
    </li>
</ol>

<ol>

<li>第1個項目

<ol>

</ol>

</li>

<li>第2個項目

<ol>

</ol>

</li>

<li>第3個項目

<ol>

</ol>

</li>

</ol>

接下來就是 CSS

ol
{
    counter-reset: item;
}
li
{
    display: block;
}
li:before
{
    content: counters(item, ".") " ";
    counter-increment: item;
}

{

counter-reset: item;

}

{

display: block;

}

li:before

{

content: counters(item, ".") " ";

counter-increment: item;

}

如此一來就可以看到呈現的結果就有階層囉！

線上範例

結論

其實還蠻簡單就可以達成階層清單，只是因為瀏覽器支援度的關係，可能實用度還不是很高，但是對我來說還是一個有趣的作法，也才知道原來靠 CSS 還是可以達到這樣的效果。

參考資料

Generated content, automatic numbering, and lists

標籤： CSS, 清單回覆此文章

回覆 (0) 引用 (0) ( 訂閱此篇文章的回覆 )

還沒有回覆。

文章彙整

文章分類

其他 (9)
未分類 (1)
程式開發技術 (7)
- C# (4)
- Linq (4)
網路程式設計 (20)
- ASP.Net (5)
- ASP.Net MVC (17)
- WCF (1)
網頁開發技術 (8)
- CSS (1)
- JavaScript (1)
- jQuery (4)
- Mobile Web (2)
開發相關軟體 (4)
- Internet Information Service (2)
- SQL Server (1)
- Visual Studio (1)

鏈結

網站資訊

授權聲明

姓名標示-非商業性-禁止改作 3.0
姓名標示 - 您必須保留原作姓名標示
非商業性 - 您不得為商業使用本著作
禁止改作 - 您不得改變或改作本著作

Coding 之路，不由分說 .Net,MVC,jQuery

使用 CSS 來做階層清單

前言

說明

結論

參考資料

Leave a comment 取消回覆

文章彙整

文章分類

標籤

鏈結

近期文章

近期迴響

網站資訊

授權聲明