Question

在这里完全沮丧的事情可能很简单。我有一个表单，并希望Zip和Zip + 4字段在同一行。出于某种原因，我没有按照我的方式排队。我花了最近6个小时在网上搜索并尝试了各种各样的东西（最新的是来自这个网站）并且没有任何效果。有谁可以帮助我吗？谢谢！这是我的代码：

<form>
<div style="float:left;"> 
  <label for "StrAddress">Street Address *</label>
<input name="StrAddress" type="text" style="width:200px"  id="StrAddress"  />
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "StrSecondaryAddress">Suite, P.O. Box, Apt, Lot</label>
<input name="StrSecondaryAddress" type="text" style="width:200px"  id="StrSecondaryAddress"  />
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "StrCity">City *</label>
<input name="StrCity" type="text" class="autosuggestinput"  style="width:200px"  id="StrCity"  />
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "subject">State</label>
<input type="text" class="input_text" name="subject" id="subject"/>
</div>
<div style="clear:both;">&nbsp;</div>
<div style="display: inline;;">
<label for "IntZip5">Zip *</label>
<input name="IntZip5" type="text" style="width:100px"  id="IntZip5"  />


<label for "IntZip4">Zip+4</label>
<input type="text" name="IntZip4" id="IntZip4" style="width:50px">
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "IntAmount">Taxable Amount</label>
<input type="text" name="IntAmount" id="IntAmount" style="width:150px">

</div>
<div style="clear:both;">&nbsp;</div>
<input type="button" class="button" value="Submit Form" />


</form>

Answer 1

this会为你做这份工作吗？请在多个浏览器上测试它因为它只在FF 3.6，IE 7 +

上测试过

Answer 2

虽然结构警察肯定会为此解雇我，但我认为使用表是在所有浏览器中排列元素的最可靠方法。设置vertical-align:top并执行您需要执行的操作。

Answer 3

你可以这样做：

<html>
<head>
<style type="text/css">
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */
label {
    width: 300px !important;/* added important to override your inline styles*/
    display: block !important;
    text-align: right !important;
    float: left;
    }
</style>
</head>
<body>
<form>
<div style="float:left;">
  <label for "StrAddress">Street Address *</label>
<input name="StrAddress" type="text" style="width:200px"  id="StrAddress"  />
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "StrSecondaryAddress">Suite, P.O. Box, Apt, Lot</label>
<input name="StrSecondaryAddress" type="text" style="width:200px"  id="StrSecondaryAddress"  />
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "StrCity">City *</label>
<input name="StrCity" type="text" class="autosuggestinput"  style="width:200px"  id="StrCity"  />
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "subject">State</label>
<input type="text" class="input_text" name="subject" id="subject"/>
</div>
<div style="clear:both;">&nbsp;</div>
<div style="display: inline;;">
<label for "IntZip5">Zip *</label>
<input name="IntZip5" type="text" style="width:100px"  id="IntZip5"  />


<label for "IntZip4">Zip+4</label>
<input type="text" name="IntZip4" id="IntZip4" style="width:50px">
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "IntAmount">Taxable Amount</label>
<input type="text" name="IntAmount" id="IntAmount" style="width:150px">

</div>
<div style="clear:both;">&nbsp;</div>
<input type="button" class="button" value="Submit Form" />


</form>

</body>
</html>

Answer 4

您发布的代码在Firefox，Chrome和IE中为我显示了zip和zip + 4在同一行。你能发布一个屏幕截图，看你如何看待它以及你希望它看起来如何？

alt text

带有并排字段的CSS表单...如何垂直对齐标签和字段？

4 个答案: