CSS form with side by side fields...how to align the labels and fields vertically?_问答_开发者

completely frustrated here with something that is probably so simple. I have a form and want the Zip and Zip+4 fields to be on the same line. For some reason nothing is lining up the way I've done it. I've spent the last 6 hours searching the web and trying various things (this latest was from this site) and nothing works. Can someone help me please? Thanks! Here is my code:

<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>
<开发者_Go百科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>

Would this do the job for you? Please test it on multiple browsers because it's only tested on FF 3.6, IE 7+

While the structure police are sure to pull me over for this, it is my considered opinion that using a table is the single most reliable way to line up elements in all browsers. Set the vertical-align:top and do what you need to do.

You can do something along this lines:

<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>

The code you posted shows zip and zip+4 on the same line for me in Firefox, Chrome, and IE. Can you post a screen shot of how you see it differently and how you want it to look?

CSS form with side by side fields...how to align the labels and fields vertically?