作者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