CSS小測試一
之前說要講放大的東西，想說要先講margin負值的應用，結果今天在想上面圖示的東西不知道做不做的出來，剛剛就隨便弄一下，效果還不錯:P，只可惜用到兩層標籤。範例網頁在這。
CSS：
#out {
padding: 0;
}
#out li {
height: 1px;
margin-bottom: 1em;
list-style: none;
}
li span {
display: block;
width: 80px;
height: 30px;
background-color: #aaf;
border: 1px solid #88c;
float: left;
margin-right: -1em;
text-align: center;
vertical-align: middle;
font-size: 160%;
font-family: Verdana;
}
span:hover {
background-color: #ffe;
}HTML：
<ul id="out">
<li><span>A</span></li>
<li><span>B</span></li>
<li><span>C</span></li>
<li><span>D</span></li>
</ul>大概說明一下，先利用float:left讓span物件水平排列顯示，此時因為li已經不佔高度了，所以li標籤的高度都是0，而且是垂直排列顯示，而且是一個黏一個，所以我用margin-bottom讓他們分開，最後再設定span的的margin-right為負值。
最後，很可惜的IE不支援XD，問題在於即使li裡面的物件變成float了，他的高度還是和已經float的物件一樣高。
21:06@CSS & HTML|迴響(6)|引用(0)
引用(http://othree.net/mt/mt-tb.cgi/3)
目前無人引用。
1由jimmy在 2005-05-04 11:48:03 發表：
在li中試看看這個屬性吧
display: inline;
2由 Bob 在 2005-05-04 16:40:41 發表：
Umm... display: inline 的話我想似乎沒辦法解決問題，還是得用兩層... 因為 li 變成 inline 之後分享同一個 margin-top, 好像沒辦法一層層往下降... 或許是我學藝不精，jimmy 可以提一下個人的解決方案嗎？
O3 的 blog 真有趣呵呵... 如果用 script 去控制 span 的 margin-right 和 li 的 margin-bottom 的話，那堆方塊就可以像一條手臂一樣擺來擺去... XD
3由 Bob 在 2005-05-04 16:49:40 發表：
差點忘了自己來做什麼 =.= 有事想請教 O3: 你覺得以 code {white-spaceL: pre;} 來取代 blah blah 的用法是好是壞？ 隨便聊聊吧 ;)
4由 Bob 在 2005-05-04 16:50:52 發表：
HTML 被濾掉了 XD, "blah blah" -> "[pre][code]blah blah[/code][/pre]"
5由OOO在 2005-05-04 17:38:30 發表：
我個人是覺得XHTML 2.0的blockcode不錯啦XD（不過當然還不能用），不然我以前是打算用一個code標籤，{ display: block; white-space: pre; }，不過IE不支援，所以我最後還是用上了pre標籤~_~。
所以我的優先順序是blockcode→code+white-space: pre;→pre+code。
6由jimmy在 2005-05-06 15:06:34 發表：
我試了一下，似乎一定要用到三層[ul][li][span]
用了inline屬性也無法達到上面那個效果
看來要讓ie能夠顯示，是殘念啊～