http://anonoz.com/armesh//contact_form/
上面的链接显示了我正在制作的联系表格.
我试图让它像右边的图片.我必须给出“尝试我们今天”的文字,这是20px的上限.
HTML：
<body>
<div id="form_container">
<div id="form_body">
**<span class="form_head">Try us Today</span>**
<br/>
<span class="form_subhead">30 day money back gurantee</span>
<form id="enquiry_form" method="post" action="scripts/contact-form-handler.PHP">
<input type="text" name="name" id="name" value="Name" />
<input type="text" name="contact" id="contact" value="Contact Number" />
<input type="text" name="e-mail" id="email" value="Email" />
<input id='submit_button' type="submit" value="Get Your Space - NOW" />
</form>
</div>
</div>
<img src="form2.jpg"/>
</body>
CSS：
.form_head {
margin-top: 20px;
color:#58585a;
font-size:22px;
}
CSS应该将.form_head 20px推向#form_body div.然而什么都没发生我甚至尝试过Firebug和Chrome开发人员工具,但没有弄清楚为什么会这样.我还尝试设置#form_body div的高度以匹配表单的高度,这样就可以将.form_head推下来但仍然无法正常工作.
我已经编码了3个月了,我经常遇到这种类型的问题.我总是通过简单地键入一些定位代码来完成它.
但是,我今天不想做同样的事,但是想要理解为什么会发生这种情况以及如何以正确的方式解决它.有人可以请一些亮点并教育我吗？
解决方法
<跨度>元素具有内联的默认显示属性.内联元素不受边距或填充等因素的影响.
只需给.form_head一个display：block或display：inline-block.
.form_head {
margin-top: 20px;
color:#58585a;
font-size:22px;
display:block; /* Add this */
}
更多阅读：The difference between “block” and “inline”
What’s the Deal With Display: Inline-Block?
