我在使用 html/css 联系表单时遇到问题。理想情况下,我希望“标签”和“输入”彼此保持水平,1px 的边框底部从标签延伸到定义的端点(不是定义的宽度)。这可能吗?我错过了什么?
<div id="contact">
<div id="invite">
<h1>Let's Talk.</h1>
<h2 class="postinfo">
<p>Have you got a project needing an eye for detail and a creative touch? <br>I'd love to hear from you. </p>
</h2>
</div><!-- end invite -->
<form action="#" method="post">
<fieldset>
<label for="name"><h1>Name:</h1></label>
<input type="text" id="name" placeholder="" />
<label for="email"><h1>Email:</h1></label>
<input type="text" id="email" placeholder="" />
<label for="subject"><h1>Subject:</h1></label>
<input type="subject" id="subject" placeholder="" />
<label for="message"><h1>Message:</h1></label>
<textarea id="message" placeholder=""></textarea>
<input type="submit" value="Send" />
</fieldset><!-- end fieldset -->
</form><!-- end form -->
</div><!-- end contact -->
#contact {
float: left;
margin-left: 300px;
margin-top: 310px;
width: 533px;
}
#invite .postinfo {
list-style-type: none;
margin-left: ;
width: 150px;
}
#form {
float: right;
margin-top: -85px;
margin-left: 230px;
}
#form fieldset {
border-style: none;
margin-left: -50px;
margin-top: -25px;
}
#form fieldset label {
padding-right: 50px;
}
#form fieldset input {
width: 300px;
}
最佳答案
我试了一下你的代码,这就是我想出的:
这是您的 HTML:
<contact>
<form action="#" method="post">
<fieldset>
<div class="clear">
<label for="name"><h1>Name:</h1></label>
<input type="text" id="name" placeholder="" />
</div>
<div class="clear">
<label for="email"><h1>Email:</h1></label>
<input type="text" id="email" placeholder="" />
</div>
<div class="clear">
<label for="subject"><h1>Subject:</h1></label>
<input type="subject" id="subject" placeholder="" />
</div>
<div class="clear">
<label for="message"><h1>Message:</h1></label>
<textarea id="message" placeholder=""></textarea>
</div>
<div class="clear">
<input type="submit" value="Send" />
</div>
</fieldset><!-- end fieldset -->
</form><!-- end form -->
</contact><!-- end contact -->
这是您的 CSS:
body { font-family:arial,helvetica,sans-serif ;
font-size:14px ;
font-weight:bold ;
}
h1 { font-size:16px ;
margin:0 ;
padding:0 ;
}
contact {
float: left;
margin-left: 300px;
margin-top: 310px;
width: 533px;
}
contact invite .postinfo {
list-style-type: none;
margin-left: ;
width: 150px;
}
contact form {
float: right;
margin-top: -85px;
margin-left: 230px;
}
contact form fieldset {
border-style: none;
margin-left: -50px;
margin-top: -25px;
}
contact form fieldset label { width:100px ;
float:left }
contact form fieldset input {
width: 200px;
float:right ;
}
.clear { clear:both ;
line-height:30px ;
}
您需要根据使用的字体大小调整标签和输入宽度。
最好的,
辛西娅
关于css 表单 - 边距/填充问题 - 包含代码和图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9688405/