[問題] CSS的UL LI 橫式清單排版問題

看板Web_Design作者 (尬一下)時間11年前 (2013/07/10 15:35), 編輯推噓1(1013)
留言14則, 5人參與, 最新討論串1/1
大家好:   有個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

07/10 16:14, , 1F
float的標籤他外面的母標籤如果沒有float,他似乎是抓不
07/10 16:14, 1F

07/10 16:17, , 2F
到寬度的。而你引用的這個方式他必須去計算每一層的寬度
07/10 16:17, 2F

07/10 16:18, , 3F
才能在那邊一下右移50%一下左移50%。沒有寬度就會跑掉了
07/10 16:18, 3F

07/10 16:18, , 4F
應該說ul有設定background跟border-bottom, 不使用clear
07/10 16:18, 4F

07/10 16:18, , 5F
你可以把DIV、UL、LI各自上色測試觀察一下或用FIREBUG看
07/10 16:18, 5F

07/10 16:19, , 6F
清除的狀況下只能讓ul也一起float吧? 你看看你的程式碼
07/10 16:19, 6F

07/10 16:20, , 7F
就知道, #FFFF99沒有顯色對吧? 另外我把ul加上float, 沒
07/10 16:20, 7F

07/10 16:20, , 8F
的一樣跑掉耶..
07/10 16:20, 8F

07/10 18:07, , 9F
我後來發現橫向選單不一定要用float: left
07/10 18:07, 9F

07/10 18:07, , 10F
可以用display: inline
07/10 18:07, 10F

07/10 18:27, , 11F
但是inline狀況下你無法使用垂直方向的margin
07/10 18:27, 11F

07/11 09:35, , 12F
你範例裡面的置中靠的是position:relative,ul不用float,你
07/11 09:35, 12F

07/11 09:35, , 13F
可以改搜尋clearfix
07/11 09:35, 13F

07/11 10:22, , 14F
還是初學者,需要吸收研究一下,謝謝大家
07/11 10:22, 14F
文章代碼(AID): #1HtGxDDF (Web_Design)