我正在尝试减少与前端代码中的演示相关的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代码会使标签出现在每个输入字段的顶部.是否有一种很好的方法可以使标记和渲染结果以我想要的方式显示？
cla*_*uzy 13
一种解决方案是将输入放在标签内..
<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;}