→ vivian070826: 不確定是不是你要的排法 06/10 20:35
v大謝謝 但是 不是 我要的排法是圖片跟menu都在同一排
menu跟圖片的間距是20px 然後會隨著螢幕的寬度自己置中
→ eggimage: 你的img沒有設置inline或inline-block啊 06/10 20:35
→ eggimage: 然後你要怎麼排法 不是很懂 06/10 20:37
→ eggimage: text-align只對inline或inline-block有效 06/10 20:37
→ eggimage: 你的排版是要怎樣的? 弄個圖來看 06/10 20:38
我img設了inline也是不會置中 我要的排法就是
menu跟圖片的間距是20px 然後就依照螢幕的寬度去置中
所以 我設了text-align:center 去想讓menu跟圖片自己置中 但圖片不會動
只有menu跑到中間
https://jsfiddle.net/0vcgujge/2/ 類似這樣 但是menu只顯示幾個其他都不見了
※ 編輯: PowerKid (1.175.103.32), 06/10/2015 21:00:55
推 eggimage: 等等 你是說你要menu+img全都置中? 都在同一行 圖片 06/10 21:07
→ eggimage: 當然不會置中 要不然就是其中一者被蓋掉 06/10 21:08
→ eggimage: 你的img和nav要排成sibling 然後設成inline block 06/10 21:08
→ eggimage: 如果你圖片必須在螢幕正中央 menu項目只能分左右或 06/10 21:09
→ eggimage: 在不同行 06/10 21:09
→ eggimage: 還是不了解你敘述的 所以才說你弄個圖稿 不是code 06/10 21:10
先謝謝e大 因為我實在做不出來 實在生不出圖片 抱歉
我要的就是menu+img全都置中在同一行 然後 menu跟img的間距是20px 隨螢幕置中
這樣就好了 也不用圖片特別置中
另外sibling是什麼意思
http://imgur.com/S1wIRgH 勉強生出的圖大概這樣
※ 編輯: PowerKid (1.175.103.32), 06/10/2015 21:39:42
※ 編輯: PowerKid (1.175.103.32), 06/10/2015 21:57:12
→ eggimage: 用繪圖軟體或是拿筆在紙上畫示意圖就可以了啊 06/10 22:17
→ eggimage: 寫網頁第一步就是要先構圖還有想運作流程 06/10 22:18
→ eggimage: 你的圖這樣看來 照我上面說的方式可行 弄個container把 06/10 22:19
→ eggimage: logo跟nav都包起來 你可以選直接width 100%然後全inline 06/10 22:20
→ eggimage: 然後text-align center 或是container限定寬度然後置中 06/10 22:21
→ eggimage: 裡面的東西float left 06/10 22:21
謝謝e大 不過看起來是沒辦法 因為我原本就有container包起來了 但就是無法置中
https://jsfiddle.net/0vcgujge/4/ 這是我照妳說的用的 但是menu不見了
※ 編輯: PowerKid (1.175.103.32), 06/10/2015 22:37:58
→ eggimage: 你的.container的位置放錯了啊 06/10 22:40
→ PowerKid: 有嗎 不是包起來嗎 06/10 22:43
→ eggimage: 你的.container是整個在外面 06/10 22:52
→ eggimage: 你現在是用header head包起來 06/10 22:53
→ PowerKid: 我用.head當container= = 06/10 22:53
→ eggimage: 然後這幾層的styling也不少問題 06/10 22:53
→ PowerKid: 抱歉 不太懂哪裡錯了不是名字不同而已嗎 都包起來了 06/10 22:54
→ eggimage: container是個很籠統的名字 通常不會直接拿來用 而是會 06/10 22:55
→ eggimage: 加個 xxx-container之類的 比如page-container 06/10 22:55
→ eggimage: 不然示意的時候很容易搞混 06/10 22:55
→ PowerKid: 謝謝 06/10 22:56
→ eggimage: 你的inline放錯地方了 06/10 22:56
→ eggimage: 是放到裡面的東西 不是head這層 06/10 22:57
→ PowerKid: 了解了 所以inline跟float用法是一樣的? 06/10 22:59
→ eggimage: 然後你head那邊width的冒號和分號都漏掉了 06/10 23:02
→ eggimage: float跟inline不一樣 架構也要改 06/10 23:02
→ eggimage: 這是你要的吧 就是置中 然後其他我就不修了 06/10 23:03
→ PowerKid: 謝謝e大的指教 06/10 23:08