float: left
讓項目符號水平排列
使用 float 要非常有技巧，否則版面會天下大亂的
通常，我們會在 float 的元素的 parent 套用 clearfix 的 css 設定 (請參考上面的範例)
原理就請自己參考網站 http://nicolasgallagher.com/micro-clearfix-hack/ 的說明囉
ul / li 除了可以是一般的項目編號外，常應用在頁籤的設計，例如
<style>
.cf:before,
.cf:after {content: " "; display: table} /* cf: clearfix */
.cf:after {clear: both}
.nav {float:left; list-style:none; padding-left:17px}
</style>
<ul class="cf">
<li class="nav">
<a href="...">home</a>
</li>
<li class="nav">
<a href="...">animals</a>
</li>
...
</ul>
* clearfix 資料參考 http://nicolasgallagher.com/micro-clearfix-hack/
1.
2.
list-style: none
不顯示預設的項目符號
在這個 case，比較好的做法是放在 li 的上一層 ul
這樣 ul 底下所有的 li 就不用一個一個的設定
當然，在 li 設定就可以針對不同的 li 給不同的項目符號
3.
padding-left: 10px
左邊 padding (間距)，讓項目符號間有一定的間距
可以用 margin-left 嗎? 當然可以
嚴格來說，就這個 case 的 semantic (意義) 而言，margin-left 會比較好
因為 margin 代表在 li 這個 box 外的邊緣 (margin)，意義上是每一個 li 的左邊都空出空間
而 padding 代表在 li 這個 box 內的間距，意義上是每一個 li 裡面的文字都左邊留下空間
因為 margin 代表在 li 這個 box 外的邊緣 (margin)，意義上是每一個 li 的左邊都空出空間
而 padding 代表在 li 這個 box 內的間距，意義上是每一個 li 裡面的文字都左邊留下空間
訪客如要回應，請先 登入
使用筆記功能，請先 登入
發表時間 :
2013-02-19 09:43:19 ( 2013-02)
觀看次數 :
2,980
發表人 :
QR Code :