gpt4 book ai didi

html - CSS - 两列表格

转载 作者:太空狗 更新时间:2023-10-29 13:40:38 26 4
gpt4 key购买 nike

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

但这里的问题是我想不出可以使标 checkout 现在每个输入字段顶部的可维护的 css 代码。有没有一种好方法可以使标记和呈现的结果都按照我想要的方式显示?

最佳答案

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

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

关于html - CSS - 两列表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5736936/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com