我创建了一个具有重叠虚线的联系表。我不确定为什么要这样做。我已将#form .row设置为100% width，所以我认为这将使其适应但不能正常工作。如何解决此问题并使它适应表单？
EXAMPLE
的CSS
<style>
#formWrap {
width: 600px;
margin-top:30px;
margin-left:30px;
background:#FFF;
padding: 16px 10px 40px;
}
#formWrap #form {
border-top:1px solid #EEE;
width:700px;
}
#form .row {
border-bottom:1px dotted #EEE;
display:block;
/*line-height:38px;*/
overflow:auto;
padding:24px 0px;
width:100%;
}
#form .row .label {
color: #333333;
font-weight: bold;
font-size: 105%;
font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
width:140px;
text-align:right;
float:left;
padding-right:10px;
margin-right:10px;
}
#form .row .input {
float:left;
margin-right:10px;
width:auto;
}
.detail {
width: 260px;
font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
margin: 0;
display:block;
}
#form .row .context {
color:#999;
font-size: 11px;
font-style: italic;
line-height:14px;
font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
width:150px;
float: left;
}
</style>
的HTML
<html>
<div class="row">
<div class="label">Contact Name *</div> <!-- end .label -->
<div class="input">
<input type="text" id="contact_name" class="detail" name="contact_name" value="" />
<span class="error"></span>
</div><!-- end .input-->
<div class="context"> e.g. John Smith or Jane Doe</div><!-- end .context -->
</div><!-- end .ronw -->
</html>
最佳答案
将您的#formWrap #form设置为此：
#formWrap #form {
border-top:1px dotted #F00;
width:600px;
}
那应该解决它
关于css - 表单内容宽度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11566817/