[問題] RWD均分的menu問題?

[cgcat (小綿羊趕集)]

我又來發問了^^

最近一個才在接觸RWD所以有很多疑問上來討教

這次的問題是我要做一個均分的MENU

在每個圖示按鈕下面會有系統字的文字MENU

但是它就是不乖乖的待在圖片下面

我有哪個地方應該修改呢?

謝謝

以下是CODE

http://jsbin.com/juvuxafa/1/edit


我想要製作的效果是這樣,MENU圖片的部分會隨裝置大小縮放

如果把FLOAT改位子那他還會置中嗎?

http://ppt.cc/8tT1

換個方式寫,不用UL的方式,可是不會水平排列了

其他效果倒是都是我想要的,可惡!要調整哪裡

CODE

http://jsbin.com/juvuxafa/1/edit
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 59.124.108.82
※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1402642250.A.F32.html
推 saluyi:你的float:left換個地方就可以了
→ mmis1000:http://jsbin.com/juvuxafa/5/edit 改這樣？
→ leochen0818:其實我不太懂你.menu .btn的display設inline-box的
→ leochen0818:用意，也不太清楚你想要呈現的畫面是怎樣@@
→ leochen0818:另外，如果要讓每個圖示按鈕下面會有系統字的文字MENU
→ leochen0818:我或許會用span將文字包住，.item設relative，span設
→ leochen0818:absolute來控制文字的位置，一切的一切還是看你想要怎
→ leochen0818:樣的畫面，或是有怎麼樣的效果等等來決定要怎麼用CSS
※ 編輯: cgcat (59.124.108.82), 06/13/2014 17:13:37
※ 編輯: cgcat (59.124.108.82), 06/13/2014 17:21:30
→ mmis1000:圖和文字都用div包裝，容器用text-align:center
※ 編輯: cgcat (59.124.108.82), 06/13/2014 18:19:22
※ 編輯: cgcat (59.124.108.82), 06/13/2014 18:20:18
※ 編輯: cgcat (59.124.108.82), 06/13/2014 18:20:53
→ mmis1000:http://jsbin.com/juvuxafa/6/edit
→ cgcat:感謝MM大~喔耶