作者james999 (無傷大雅)
看板Web_Design
標題[問題] 新手CSS問題請益
時間Fri Jan 12 08:30:15 2018
最近想要做一簡單的網頁，
閱讀過相關CSS的資料，
但實際要應用卻遇到困難..
紅色部份為一logo，
右邊綠色部份為二個input Text，
黑色部份為一字串，
紅色上標下標相等於2個綠色的上標下標，
黑色則在上述元件下方。
https://imgur.com/a/a4MZz
請板友提供些指引，謝謝:)
p.s. 主要是不曉得綠和紅中間的空白該怎麼辦
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.230.197.165
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1515717018.A.84E.html
※ 編輯: james999 (61.230.197.165), 01/12/2018 08:35:23
1F：推 diabloevagto: Flexbox 01/12 08:56
2F：→ sanyaoooo: 所以你希望呈現什麼樣子？ 01/12 08:57
3F：→ sanyaoooo: 抱歉我誤會了XD 不要理我 01/12 08:58
4F：→ james999: 希望能用CSS3就能達成@@ 01/12 11:08
5F：→ james999: 沒辦法加裝額外套件！ 01/12 11:09
6F：推 lovetoshinya: 先上下兩個div 上面再切2個div用flexbox定logo跟inp 01/12 11:46
7F：→ lovetoshinya: ut 黑色用p下置中就好 01/12 11:46
8F：推 idareyou: 最快的解法是用table 左右兩個元素都固定寬度 01/12 17:14
9F：→ idareyou: 考慮到手機板會使用display:table來模擬 01/12 17:15
10F：→ idareyou: flexbox是對的，但不是最正確的(可悲的舊IE用戶) 01/12 17:17
13F：→ idareyou: 但我還是建議用flexbox 01/12 17:42
14F：→ Rinorune: 比較快就input絕對定位 右上 右下 01/12 21:03
16F：→ james999: 謝謝大家，感謝R大的教學:) 01/12 21:49
不明白為何我套用後結果和R大給的不一樣@@
https://imgur.com/a/5raSx
※ 編輯: james999 (61.230.197.165), 01/12/2018 22:14:31
17F：→ sanyaoooo: 如果圖我沒看錯的話，R大是放在<header>，不是放在<hea 01/12 23:29
18F：→ sanyaoooo: d>，兩個是不一樣的喔 01/12 23:29
19F：推 lovetoshinya: 你的標籤跟內容全部都要放在body裡面才對 01/12 23:54
20F：→ james999: 唉呀 謝謝兩位 可以正常顯示了 我真粗心 冏 01/12 23:59
想再請問一下... 如果希望在兩個input前面加上說明文字如：name: 的話，
該如何加呢? 剛剛不管怎麼加字都會在圖片下方...
※ 編輯: james999 (61.230.196.117), 01/14/2018 16:02:16
21F：推 lovetoshinya: <span>name :<input></input></span> 01/14 22:25
22F：→ james999: span依舊無法 字會出現在圖片下方Orz 01/14 23:09
23F：→ james999: 還是得像input一定 強迫定位在input的前方之類的@@? 01/14 23:10
24F：→ sanyaoooo: 因為input是用absolute，我直接改在R大的範例網址 01/15 21:01
26F：→ sanyaoooo: 建議把範例中的CSS弄清楚，有問題才知道是出在哪裡 01/15 21:03