Html 具有多列的表单，没有表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/772745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Forms with multiple columns, no tables
提问by user93810
How to position a complex form with multiple fields in line across the screen?
如何在屏幕上排列具有多个字段的复杂表单？
回答by Ben S
Why are people so hell-bent on avoiding tables?
为什么人们如此执着于避免使用桌子？
Tables are not deprecated and should be used when displaying content which logically belongs in a table.
表未被弃用，应在显示逻辑上属于表的内容时使用。
If your form is logically grouped such that a table would be intuitive, please use a table.
如果您的表单按逻辑分组以便表格直观，请使用表格。
Always be thinking: "What's the cleanest, simplest, most maintainable way to achieve this result."
始终在想：“实现这一结果的最干净、最简单、最易于维护的方法是什么？”
If you want a fluid form with a variable number columns, then disregard this.
如果您想要具有可变数量列的流体形式，请忽略这一点。
回答by Austin Hyde
I prefer the slightly-more-semantic way, using a definition list:
我更喜欢稍微语义化的方式，使用定义列表：
<dl class="form">
<dt><label for="input1">One:</label></dt>
<dd><input type="text" name="input1" id="input1"></dd>
<dt><label for="input2">Two:</label></dt>
<dd><input type="text" name="input2" id="input2"></dd>
</dl>
Then your CSS:
然后你的CSS：
dl.form {
width:100%;
float:left;
clear:both;
}
dl.form dt {
width:50%;
float:left;
clear:left;
text-align:right;
}
dl.form dd {
width:50%;
float:left;
clear:right;
text-align:left;
}
This should produce a form centered in the page, with the labels in the left column and the inputs in the right
这应该产生一个以页面为中心的表单，左列中的标签和右列中的输入
回答by Bryan A
There are many different ways to do this. It's all a matter of preference. What I typically do is have a wrapper div that contains all of the rows, and then a div block per row that contains the label, input, and validator. You can use the line-height CSS property to help you with vertical alignment. Example:
有许多不同的方法可以做到这一点。这都是一个偏好问题。我通常做的是有一个包含所有行的包装 div，然后每行有一个包含标签、输入和验证器的 div 块。您可以使用 line-height CSS 属性来帮助您进行垂直对齐。例子：
<div class="formWrapper">
<form>
<div class="formItem">
<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" class="required" type="text" />
<span class="validator" style="display: none;">*</>
</div>
... <!-- Rinse repeat -->
</form>
</div>
<style type="text/css">
.formWrapper { width: 400px }
.formWrapper .formItem { line-height: 35px; height: 35px; }
.formWrapper label { width: 50px; }
.formWrapper input { width: 100px; border: 1px solid #000; }
.formWrapper .validator { padding-left: 10px; color: #FF0000; }
</style>
Hope that helps.
希望有帮助。
回答by Hudson Hawk
After looking at many many different solutions, I found the examples on this page (particularly the one from 'Fatal'?) some of the most helpful. But the extensive
在查看了许多不同的解决方案后，我发现此页面上的示例（尤其是“致命”中的示例？）中的一些最有帮助。但广泛的
and tags did bother me a bit. So here is a little bit of a modification that some may like. Also, you find some sort of 'wrapper' or 'fieldset' style very necessary to keep the float from affecting other HTML. Refer to examples above.
和标签确实让我有点困扰。所以这里有一些修改，有些人可能会喜欢。此外，您会发现某种“包装器”或“字段集”样式对于防止浮动影响其他 HTML 非常必要。参考上面的例子。
<style>
.formcol{
float: left;
padding: 2px;
}
.formcol label {
font-weight: bold;
display:block;}
</style>
<div class="formcol">
<label for="org">organization</label>
<input type="text" id="org" size="24" name="org" />
</div>
<div class="formcol">
<label for="fax">fax</label>
<input type="text" id="fax" name="fax" size="2" />
</div>
<div class="formcol">
<label for="3">three</label>
<input type="text" id="3" name="3" />
<label for="4">four</label>
<input type="text" id="4" name="4" />
<label for="5">five</label>
<input type="text" id="5" name="5" />
</div>
<div class="formcol">
<label for="6">six</label>
<input type="text" id="6" name="6" />
</div>
回答by Irukandji
I suggest you blueprint CSS framework. Have a quick look at the demo page.
回答by Irukandji
This is what I usually use when I need to design pretty complex forms.
当我需要设计非常复杂的表单时，这就是我通常使用的。
HTML:
HTML：
<fieldset>
<legend>Consent group</legend>
<form>
<fieldset class="nolegend">
<p><label><span>Title</span> <input type="text" name="title" size="40" value="" /></label></p>
<p><label><span>Short name</span> <input type="text" name="sname" size="20" value="" /></label></p>
<p><label><br /><input type="checkbox" name="approval"> This consent group requires approval</label></p>
</fieldset>
<fieldset class="nolegend">
<p><label><span>Data use limitations</span> <textarea name="dul" cols="64" rows="4"></textarea></label></p>
</fieldset>
<input type="submit" value="Submit" />
</form>
</fieldset>CSS:
CSS：
body, input, textarea, select {
font: 1em Arial, Helvetica, sans-serif;
}
input, textarea, select { font-size: .8em }
fieldset,
fieldset legend {
background-color: #EEE;
}
fieldset {
border: none;
margin: 0;
padding: 0 0 .5em .01em;
top: 1.25em;
position: relative;
margin-bottom: 2em;
}
fieldset fieldset {
margin: 0 0 1em 0;
}
fieldset legend {
padding: .25em .5em 0 .5em;
border-bottom: none;
font-weight: bold;
margin-top: -1.25em;
position: relative;
*left: -.5em;
color: #666;
}fieldset form,
fieldset .fieldset {
margin: 0;
padding: 1em .5em 0 .5em;
overflow: hidden;
}
fieldset.nolegend {
position: static;
margin-bottom: 1em;
background-color: transparent;
padding: 0;
overflow: hidden;
}
fieldset.nolegend p,
fieldset.nolegend div {
float: left;
margin: 0 1em 0 0;
}
fieldset.nolegend p:last-child,
fieldset.nolegend div:last-child {
margin-right: 0;
}
fieldset.nolegend label>span {
display: block;
}
fieldset.nolegend label span {
_display: block;
}I omitted couple lines of CSS with Safari hacks. You can check out live versionof this code.
我用 Safari hacks 省略了几行 CSS。您可以查看此代码的实时版本。
回答by inkedmn
That would be done using CSS by setting the "display" property to "inline" (since form elements are, by default, block level elements).
这可以通过将“display”属性设置为“inline”来使用 CSS 来完成（因为表单元素在默认情况下是块级元素）。
回答by Joe
Do a search for "layouts without tables". Many sites describe formatting with CSS. Here is a simple intro: http://www.htmlgoodies.com/beyond/css/article.php/3642151
搜索“没有表格的布局”。许多站点使用 CSS 描述格式。这是一个简单的介绍：http: //www.htmlgoodies.com/beyond/css/article.php/3642151
回答by DavidHyogo
Pace KyleFarris but I just had to give Ben S a vote for having the guts to mention tables. Just look at the variety of CSS solutions on this page and around the internet for a ridiculously simple problem. CSS may one day become a good solution, but for the time being replicating the simple row and column grid that the table tag provides is extremely complex. I have spent countless fruitless hours with this prejudice against tables for things like a form. Why do we do this to ourselves?
佩斯凯尔法里斯，但我不得不给本 S 投票，因为他有胆量提到桌子。只要看看这个页面上和互联网上的各种 CSS 解决方案，就会发现一个非常简单的问题。CSS 可能有一天会成为一个很好的解决方案，但目前复制 table 标签提供的简单行和列网格是极其复杂的。我已经花费了无数没有结果的时间来对表格之类的东西产生偏见。我们为什么要这样对自己？
回答by Eduardo
I prefer to use fieldsetto group all elements and pfor each form field.
我更喜欢使用 fieldset对每个表单字段的所有元素和p进行分组。
<html>
<head>
<style type="text/css">
fieldset {
width: 500px;
background-color: lightblue;
}
fieldset legend {
font-weight: bold;
}
fieldset p {
clear:both;
padding: 5px;
}
fieldset label {
text-align: left;
width: 100px;
float: left;
font-weight: bold;
}
fieldset .Validator {
color: red !important;
font-weight: bold;
}
</style>
<head>
<body>
<form>
<fieldset>
<legend>Data</legend>
<p>
<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" class="required" type="text" />
<span class="Validator" style="display: none;">*</span>
</p>
<p>
<label for="lastName">Last Name:</label>
<input name="lastName" id="lastName" class="required" type="text" />
<span class="Validator">*</span>
</p>
</fieldset>
</form>
</body>
</html>
