如何创建双列HTML表单

Question

有没有人有任何关于如何解决标签和文本区域如此不对称问题的提示？构建这样一个表单的最佳方法是什么？

我在考虑让一个div向左浮动（带有标签）和另一个div，文本区域向右浮动，但我没有完全正确地构建它。

Answer 1

这是你的想法，我刚写了......

Fiddle

HTML布局

<div>
    <div class="left">
        <span>Comment</span>
        <span>Tags</span>
        <span>Category List</span>
    </div>
    <div class="right">
        <input type="text" />
        <input type="text" />
        <select></select>
    </div>
</div>

<强> CSS

body { background: #222; color: white; }

.left, .right { width: 50%; float: left; }

.left  { text-align: right; }
.right { text-align: left;  }

span, input, select { display: block; padding: 5px; margin: 5px; }

span   { font-family: sans-serif; line-height: 20px; font-weight: bold;     }
input  { width: 200px;            height: 30px;      box-sizing:border-box; }
select { width: 200px;            height: 30px;      box-sizing:border-box; }

Answer 2

最好的方法是使用BootStrap框架样式问题。您可以进入网站并了解更多信息。另一种方法是将标签和输入字段（也选择字段）放在表格中，它们将被组织起来。

提交BootStrap会更好，否则请使用简单的方法。并且没有浮动问题，那就更好了！

Answer 3

如果您想使用div，请在float:left之后立即将它们设为<div style="clear:both"></div>。然后它们将正确显示。 就个人而言，我会使用表格，就像伊斯兰教Attrash的回答一样。