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

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

css forms

带有并排字段的CSS表单…如何垂直对齐标签和字段？,css,forms,Css,Forms,在这里，我对可能如此简单的事情感到非常沮丧。我有一个表单，希望Zip和Zip+4字段在同一行。由于某种原因，没有什么事情会像我做的那样。在过去的6个小时里，我一直在网上搜索，尝试各种各样的东西（最新的一个是从这个网站上），但什么都不管用。有人能帮我吗？谢谢这是我的密码： <form> <div style="float:left;"> <label for "StrAddress">Street Address *</label> <

在这里，我对可能如此简单的事情感到非常沮丧。我有一个表单，希望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>


街道地址*
套房，邮政信箱，公寓，地段
城市*
陈述
拉链*
邮政编码+4
应纳税额

虽然结构警察肯定会让我屈服，但我经过深思熟虑后认为，在所有浏览器中，使用表格是排列元素最可靠的方法。设置

垂直对齐：top

并执行您需要执行的操作。

您可以按照以下方式执行操作：

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


*{padding:0；margin:0；}/*不要使用通用选择器这只是一个例子*/
标签{
宽度：300px！重要；/*添加了重要内容以覆盖内联样式*/
显示：块！重要；
文本对齐：对！重要；
浮动：左；
}
街道地址*
套房，邮政信箱，公寓，地段
城市*
陈述
拉链*
邮政编码+4
应纳税额

您发布的代码在Firefox、Chrome和IE中为我在同一行显示了zip和zip+4。您能发布一个屏幕截图，说明您对它的不同看法以及您希望它的外观吗

你愿意做这项工作吗？请在多个浏览器上测试它

因为它只在FF 3.6、IE 7+

上测试过，所以在我的Firefox中，所有其他标签/字段组合都在单独的行中，zip和zip+4在同一行中。那么，你的问题是什么呢？sitepoint实际上有一个很好的教程：在理解了这个概念之后，为LIs创建一个特殊的类，它可以包含多个标签/字段，然后你就完成了！看起来您在所有标签“for”属性中都缺少等号。谢谢，但这必须使用CSS完成…这是用于政府网站的，我不能使用表格。很抱歉造成混淆…它工作正常，我只是尝试让输入框垂直排列（不包括zip+4）。看起来我要么把所有的字段排成一行，看起来很漂亮，要么我把Zip和Zip+4放在同一行，所有的东西都是阶梯式的（一个技术术语），但不能两者都做！再次感谢！我还在FF和IE8（甚至怪癖模式和兼容性视图）中尝试了您的代码，得到了相同的显示。我知道。看起来很棒！在投入使用之前，我会抓起它并进行测试，但这正是我想要的。我真想看看是怎么做到的！非常感谢所有回应的人，祝他们节日快乐！另外，我会将类“multi”重命名为“zip”，例如，如果需要的话，可以在JS或CSS中引用。。节日快乐：）请在答案中加入解决方案，而不是简单地提供链接。例如，我的路由器将jsfiddle.net作为DBDL（驱动下载）的源阻止。