Html CSS - 两列表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5736936/
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
CSS - Two Column Form
提问by John
I'm trying to reduce the amount of html markup related to presentation in my front end code. In a form I'm currently working on, I want to have 2 column of form fields. One way that will definitely do what I want is this:
我正在尝试减少前端代码中与演示相关的 html 标记量。在我目前正在处理的表单中，我想要 2 列表单字段。肯定会做我想做的一种方法是：
<html>
<head>
<style>
body {width:400px;}
.col {width:200px; height: 100px; float:left; display:block;}
label, input {display:block;}
</style>
</head>
<body>
<div class="col">
<label>Field1:</label>
<input>
</div>
<div class="col">
<label>Field2:</label>
<input>
</div>
</body>
</html>
I want to achieve the same results when rendered in browser WITHOUT the div tags in the mark up. So I did something like this:
我想在浏览器中呈现时获得相同的结果，而没有标记中的 div 标签。所以我做了这样的事情：
<html>
<head>
<style>
body {width:400px;}
label,input {width:200px; height: 30px; float:left; display:block;}
</style>
</head>
<body>
<label>Field1:</label>
<label>Field2:</label>
<input>
<input>
</body>
</html>
This is close, but I want the <label>markup tag to appear before each <input>markup tag in the code like so:
这很接近，但我希望<label>标记标记出现在<input>代码中的每个标记标记之前，如下所示：
<label>field1</label>
<input>
<label>field2</label>
<input>
But problem here is that I can't think of maintainable css code that will make the label appear on top of each input field. Is there a good way to make both the mark up and the rendered result appear the way I want to?
但这里的问题是，我想不出可维护的 css 代码，可以使标签出现在每个输入字段的顶部。有没有一种好方法可以使标记和渲染结果都以我想要的方式出现？
回答by clairesuzy
One solution is to put the input inside the label..
一种解决方案是将输入放在标签内。
<label>Field1:<input></label>
<label>Field2:<input></label>
then example CSS..
然后示例 CSS ..
label {width:200px; height: 30px; display:inline-block;}
input {display: block;}
or
或者
label,input {width:200px; height: 30px; display:inline-block;}
回答by MikeM
Seem's hacky, but this works.
看起来很笨拙，但这有效。
http://jsfiddle.net/pxfunc/VCaMe/1/
http://jsfiddle.net/pxfunc/VCaMe/1/
using class="col1" or class="col2"...
使用 class="col1" 或 class="col2"...
HTML:
HTML：
<form>
<label for="i1" class="col1">Label 1</label>
<input id="i1" class="col1" type="text" value="Input 1" />
<label for="i2" class="col2">Label 2</label>
<input id="i2" class="col2" type="text" value="Input 2" />
</form>
CSS:
CSS：
form {width:600px;background-color:#eee;overflow:hidden;}
.col1 {display:block;float:left;line-height:30px;width:301px;height:30px;background-color:#f00;border:0;}
.col2 {position:relative;top:-30px;display:block;float:right;line-height:30px;width:299px;height:30px;background-color:#ff0;border:0;}
That said I still agree with the first comment under the question, seems like over-thinking a solution that could use div's or some kind of <label>& <input>wrapper
也就是说，我仍然同意问题下的第一条评论，似乎过度思考了一个可以使用 div 或某种<label>&<input>包装器的解决方案
