[問題] 新手CSS問題請益 james999 PTT批踢踢實業坊

[問題] 新手CSS問題請益

作者: james999 (無傷大雅) 2018-01-12 08:30:15

最近想要做一簡單的網頁，
閱讀過相關CSS的資料，
但實際要應用卻遇到困難..
紅色部份為一logo，
右邊綠色部份為二個input Text，
黑色部份為一字串，
紅色上標下標相等於2個綠色的上標下標，
黑色則在上述元件下方。
https://imgur.com/a/a4MZz
請板友提供些指引，謝謝:)
p.s. 主要是不曉得綠和紅中間的空白該怎麼辦

作者: diabloevagto (wi) 2018-01-12 08:56:00

Flexbox

作者: sanyaoooo (山藥) 2018-01-12 08:57:00

所以你希望呈現什麼樣子？抱歉我誤會了XD 不要理我

作者: james999 (無傷大雅) 2018-01-12 11:08:00

希望能用CSS3就能達成@@沒辦法加裝額外套件！

作者: lovetoshinya (è‰¾å¤šå¿ƒå¤œ) 2018-01-12 11:46:00

先上下兩個div 上面再切2個div用flexbox定logo跟input 黑色用p下置中就好

作者: idareyou (HellTraveller) 2018-01-12 17:14:00

最快的解法是用table 左右兩個元素都固定寬度考慮到手機板會使用display:table來模擬flexbox是對的，但不是最正確的(可悲的舊IE用戶)https://jsfiddle.net/kos0616/3wbr9v2u/1/https://jsfiddle.net/kos0616/05ooeq55/ divTable但我還是建議用flexbox

作者: Rinorune (杜) 2018-01-12 21:03:00

比較快就input絕對定位右上右下https://jsfiddle.net/zcjy7k39/

作者: james999 (無傷大雅) 2018-01-12 21:49:00

謝謝大家，感謝R大的教學:)

作者: sanyaoooo (山藥) 2018-01-12 23:29:00

如果圖我沒看錯的話，R大是放在<header>，不是放在<head>，兩個是不一樣的喔

作者: lovetoshinya (è‰¾å¤šå¿ƒå¤œ) 2018-01-12 23:54:00

你的標籤跟內容全部都要放在body裡面才對

作者: james999 (無傷大雅) 2018-01-12 23:59:00

唉呀謝謝兩位可以正常顯示了我真粗心冏

作者: lovetoshinya (è‰¾å¤šå¿ƒå¤œ) 2018-01-14 22:25:00

作者: james999 (無傷大雅) 2018-01-14 23:09:00

span依舊無法字會出現在圖片下方Orz還是得像input一定強迫定位在input的前方之類的@@?

作者: sanyaoooo (山藥) 2018-01-15 21:01:00

因為input是用absolute，我直接改在R大的範例網址https://jsfiddle.net/zcjy7k39/1/建議把範例中的CSS弄清楚，有問題才知道是出在哪裡

繼續閱讀

[請益] 加入[email protected]群組後的贈品機制(google表單?)onewalker [請益] 詢問wordpress的排版&付費LisaGi ［徵才］共識科技徵網頁UI設計holise71 [問題] Html or CSS Form問題詢問aa12783509 [問題] mno1204 [問題] Asp檔當中用javascript 放音樂無效？kakaloto [問題] 請問wordpress的頁首圖片更換..beyonina [問題] 請問mojo的wordpress pro包Giojo [問題] Vue.js SPA下navbar樣式轉換yuanchen1103 [心得] 分享自己的個人網站求鞭yorock