CSS 之 ul li 標籤運用(橫向的連結選擇方塊)

橫向的連結選擇方塊，如上圖所示，運用範圍很廣，很多網站都有用到，滑鼠指標移到連結內就變色。

剛開始我還以為是javascrpt，查了下網頁源碼，原來是css，哈哈，話不多說，下面是代碼：

head內的style代碼：

typeul {
margin:10px 130px 0 130px;
padding: 10px 10px 10px 10px;
font-size: 20px;
border: #CCCCCC 5px outset;
}

typeul li {list-style:none;display:inline;padding:5px;}
typeul li a {padding:5px;color:#0066FF;text-decoration:none;}
typeul li a:hover {background:#FF9900;color:#fff;}

由於部落格html會解析誤判，所以將head及body內容以圖片顯示：





大部份的css語法，像margin邊界、border邊框、padding留白、background底色、font-size字大小...等，大家都應該知道就不說明。

這邊只要知道一個css語法 display:inline，用來控制 li 標籤橫向列出文字就可以了。

有需要的人，就拿去用用，或學習一下。

.