作者kiding119 (尬一下)
看板Web_Design
標題[問題] CSS的UL LI 橫式清單排版問題
時間Wed Jul 10 15:35:38 2013
大家好：
有個CSS中的UL與LI的橫式排版置中問題想請教大家，
我想實作出此網頁的效果：
http://ppt.cc/JHKg
自己無法理解的點是為何要在
#centeredmenu ul 與
#centeredmenu中
還要加 float:left; 翻書學到關於UL與LI的解釋是透過浮動設定讓直列式
轉換成橫列式選單,填補原本左邊的空間，那應該只要設定
#centeredmenu ul li的float:left，為何連
#centeredmenu ul都要設定？
是說自己實作此範例後，只設定
#centeredmenu ul li的float:left會
呈現正常的橫式清單：
http://i.imgur.com/sKNfyGq.png?1
但是一在
#centeredmenu ul中加上float:left;後，就算出現非常狂野
的狀態，如圖：
http://i.imgur.com/4vLt9hD.jpg
目前在這邊卡關，更別說置中部分，請教一下各位們．
附上卡關程式碼：
https://shared.com/ylvn195mxp
感謝您們！
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 112.105.228.22
1F：→ nekoares:float的標籤他外面的母標籤如果沒有float，他似乎是抓不 07/10 16:14
2F：→ nekoares:到寬度的。而你引用的這個方式他必須去計算每一層的寬度 07/10 16:17
3F：→ nekoares:才能在那邊一下右移50%一下左移50%。沒有寬度就會跑掉了 07/10 16:18
4F：→ DongFeng:應該說ul有設定background跟border-bottom, 不使用clear 07/10 16:18
5F：→ nekoares:你可以把DIV、UL、LI各自上色測試觀察一下或用FIREBUG看 07/10 16:18
6F：→ DongFeng:清除的狀況下只能讓ul也一起float吧? 你看看你的程式碼 07/10 16:19
7F：→ DongFeng:就知道, #FFFF99沒有顯色對吧? 另外我把ul加上float, 沒 07/10 16:20
8F：→ DongFeng:的一樣跑掉耶.. 07/10 16:20
9F：→ Isacat:我後來發現橫向選單不一定要用float: left 07/10 18:07
10F：→ Isacat:可以用display: inline 07/10 18:07
11F：→ nekoares:但是inline狀況下你無法使用垂直方向的margin 07/10 18:27
12F：推 EROS4:你範例裡面的置中靠的是position:relative，ul不用float，你 07/11 09:35
13F：→ EROS4:可以改搜尋clearfix 07/11 09:35
14F：→ kiding119:還是初學者,需要吸收研究一下,謝謝大家 07/11 10:22