[問題] 新手CSS問題請益

看板Web_Design作者 (無傷大雅)時間6年前 (2018/01/12 08:30), 6年前編輯推噓7(7019)
留言26則, 6人參與, 6年前最新討論串1/1
最近想要做一簡單的網頁, 閱讀過相關CSS的資料, 但實際要應用卻遇到困難.. 紅色部份為一logo, 右邊綠色部份為二個input Text, 黑色部份為一字串, 紅色上標下標相等於2個綠色的上標下標, 黑色則在上述元件下方。 https://imgur.com/a/a4MZz 請板友提供些指引,謝謝:) p.s. 主要是不曉得綠和紅中間的空白該怎麼辦 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.230.197.165 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1515717018.A.84E.html ※ 編輯: james999 (61.230.197.165), 01/12/2018 08:35:23

01/12 08:56, 6年前 , 1F
Flexbox
01/12 08:56, 1F

01/12 08:57, 6年前 , 2F
所以你希望呈現什麼樣子?
01/12 08:57, 2F

01/12 08:58, 6年前 , 3F
抱歉我誤會了XD 不要理我
01/12 08:58, 3F

01/12 11:08, 6年前 , 4F
希望能用CSS3就能達成@@
01/12 11:08, 4F

01/12 11:09, 6年前 , 5F
沒辦法加裝額外套件!
01/12 11:09, 5F

01/12 11:46, 6年前 , 6F
先上下兩個div 上面再切2個div用flexbox定logo跟inp
01/12 11:46, 6F

01/12 11:46, 6年前 , 7F
ut 黑色用p下置中就好
01/12 11:46, 7F

01/12 17:14, 6年前 , 8F
最快的解法是用table 左右兩個元素都固定寬度
01/12 17:14, 8F

01/12 17:15, 6年前 , 9F
考慮到手機板會使用display:table來模擬
01/12 17:15, 9F

01/12 17:17, 6年前 , 10F
flexbox是對的,但不是最正確的(可悲的舊IE用戶)
01/12 17:17, 10F

01/12 17:32, 6年前 , 11F

01/12 17:40, 6年前 , 12F

01/12 17:42, 6年前 , 13F
但我還是建議用flexbox
01/12 17:42, 13F

01/12 21:03, 6年前 , 14F
比較快就input絕對定位 右上 右下
01/12 21:03, 14F

01/12 21:32, 6年前 , 15F

01/12 21:49, 6年前 , 16F
謝謝大家,感謝R大的教學:)
01/12 21:49, 16F
不明白為何我套用後結果和R大給的不一樣@@ https://imgur.com/a/5raSx ※ 編輯: james999 (61.230.197.165), 01/12/2018 22:14:31

01/12 23:29, 6年前 , 17F
如果圖我沒看錯的話,R大是放在<header>,不是放在<hea
01/12 23:29, 17F

01/12 23:29, 6年前 , 18F
d>,兩個是不一樣的喔
01/12 23:29, 18F

01/12 23:54, 6年前 , 19F
你的標籤跟內容全部都要放在body裡面才對
01/12 23:54, 19F

01/12 23:59, 6年前 , 20F
唉呀 謝謝兩位 可以正常顯示了 我真粗心 冏
01/12 23:59, 20F
想再請問一下... 如果希望在兩個input前面加上說明文字如:name: 的話, 該如何加呢? 剛剛不管怎麼加字都會在圖片下方... ※ 編輯: james999 (61.230.196.117), 01/14/2018 16:02:16

01/14 22:25, 6年前 , 21F
<span>name :<input></input></span>
01/14 22:25, 21F

01/14 23:09, 6年前 , 22F
span依舊無法 字會出現在圖片下方Orz
01/14 23:09, 22F

01/14 23:10, 6年前 , 23F
還是得像input一定 強迫定位在input的前方之類的@@?
01/14 23:10, 23F

01/15 21:01, 6年前 , 24F
因為input是用absolute,我直接改在R大的範例網址
01/15 21:01, 24F

01/15 21:01, 6年前 , 25F

01/15 21:03, 6年前 , 26F
建議把範例中的CSS弄清楚,有問題才知道是出在哪裡
01/15 21:03, 26F
文章代碼(AID): #1QM06QXE (Web_Design)