作者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/cn.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