Question

我正在尝试减少与前端代码中的演示相关的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>

我希望在浏览器中渲染时获得相同的结果，而标记中没有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>

这很接近，但我希望<label>标记标记出现在代码中的每个<input>标记标记之前，如下所示：

<label>field1</label>
<input>
<label>field2</label>
<input>

但问题在于我无法想到可维护的css代码会使标签出现在每个输入字段的顶部。是否有一种很好的方法可以使标记和渲染结果以我想要的方式显示？

Answer 1

一种解决方案是将输入放在标签内..

<label>Field1:<input></label>
<label>Field2:<input></label>

然后是示例CSS ..

label {width:200px; height: 30px; display:inline-block;}
input {display: block;}

或

label,input {width:200px; height: 30px; display:inline-block;}

Answer 2

看起来很笨，但这很有效。

http://jsfiddle.net/pxfunc/VCaMe/1/

使用class =“col1”或class =“col2”...

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：

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

那说我仍然同意这个问题下的第一个评论，似乎过分思考一个可以使用div或某种<label>＆amp;的解决方案。 <input>包装器

CSS - 两列表格

2 个答案: