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

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

最近想要做一簡單的網頁，
閱讀過相關CSS的資料，
但實際要應用卻遇到困難..
紅色部份為一logo，
右邊綠色部份為二個input Text，
黑色部份為一字串，
紅色上標下標相等於2個綠色的上標下標，
黑色則在上述元件下方。

請板友提供些指引，謝謝:)
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弄清楚，有問題才知道是出在哪裡

繼續閱讀