此練習試作一個橫列的清單。使用 OL, UL 製作清單時，預設是垂直排列。如果要水平排列，可以用 float 達成。
- OL：建立一個編號的清單。
- float:left：元素向左靠，後續內容接在右邊。如果使用 float:right，則會由右向左排列。
- list-style-position:inside：項目的編號數字放在元素矩框內。
- 風格用法：
<style type='text/css'>
.row {font-size:18px;
list-style:inside decimal;
}
.row LI.first
{float:left;
border:solid 1px red;
}
</style>
<ol class=row>
<li class=first>射擊遊戲
<ul>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a>
<li>暴力流浪漢
</ul>
<li class=first>益智遊戲
<ul>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a>
<li>移方塊
<li>算術練習
<li>英文單字
</ul>
<li class=first>賽車遊戲
<ul>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a>
</ul>
</ol> - 執行結果：
- 上例，在 IE6 不會顯示編號數字；Firefox, Safari, Chrome 則有編號數字。
文字行的清單。這個練習使用 display:inline 將清單放在文字行中。要注意的是，數字項目會被省去。
- 風格用法：
<style type='text/css'>
.line {display:inline;
margin:0;
padding:0;
list-style:inside decimal;
}
.line LI
{display:inline;
border:solid 1px red;
margin-left:5px;
}
</style>
各種遊戲：
<ol class=line>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a>
</ol>
。歡迎來玩。 - 執行結果： 各種遊戲： 。歡迎來玩。
清單加上顏色。這個練習使用 border, background 替清單加上顏色，再用 :hover, :active 加上動態效果。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.clr {display:inline-block;
list-style:none;
margin:0;
padding:0;
vertical-align:middle;
}
.clr LI
{border-left:solid 8px #500;
border-right:solid 8px #f00;
border-bottom:solid 1px #200;
background:#a00;
width:160px;
text-align:center;
}
.clr LI:hover
{background:#d00;}
.clr LI:active
{background:#500;}
</style>
各種遊戲：
<ol class=clr>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a>
</ol>
。歡迎來玩。 - 執行結果： 各種遊戲： 。歡迎來玩。
- 在 IE6 中， display:inline-block 用在 OL，沒有效果；Firefox, Safari, Chrome 都成功。
