Html 如何布局表单

假设我想这样布局我的页面：

Label: <inputField>        Label: <inputField>
Label: <inputField>        Label: <inputField>

<-------------------- LINE ------------------>

Label: <inputField>
Label: <inputField>
Label: <inputField>
Label: <inputField> <inputField>

<-------------------- LINE ------------------>

<button> <button> <button> <checkbox>

标签：标签： 标签：标签： 标签： 标签： 标签： 标签： 我会使用

来布局表单对象，使用

来布局行

但我不确定这是否是一个“好”的解决方案。（我不喜欢所有生成的表…）

对于这个布局，我应该更好地使用

元素吗？

---

或者您将如何操作？

使用表单，您可以设置

标签

和

输入

的样式。你应该那样做

编辑

又快又脏的版本。根据需要进行调整

<div class="labelLeft"><label>left label</label> <input /></div> 
<div class="labelRight"><label>right label</label> <input /></div> 

<br />

<div class="labelLeft"><label>left label</label> <input /></div> 
<div class="labelRight"><label>right label</label> <input /></div>

<br />

<div class="labelLeft"><label>left label</label> <input /></div> 
<div class="labelRight"><label>right label</label> <input /></div> 

<hr />

<label>label</label> <input /><br /><br />
<label>label</label> <input /><br /><br />
<label>label</label> <input /><br /><br />
<label>label</label> <input /> <input />

<hr />

<button></button> <button></button> <button></button> &nbsp;<input type="checkbox" /> 

div.labelLeft{float:left; width:250px;}
div.labelright{float:right; width:250px;}
label{border:1px solid red;}

左标签
右标签


左标签
右标签


左标签
右标签

标签


标签


标签


标签

div.labelLeft{float:左；宽度：250px；}
div.labelright{float:right；width:250px；}
标签{边框：1px纯红色；}

---

你可以不用

为每个输入添加styleClass
并处理这些标签的css

您可能只需要这两个属性：
display:inline
和
float:left/right
您可以查看一个示例，了解它们是如何实现其功能的。
基本上，他们有一个960网格系统，您也可以使用它来布局表单

也值得一看。
这里有一个工作示例：。您可以浮动左侧的标签/输入，并为右侧的标签提供一个左边距，以使其超出左侧输入

标记：

<form id="sebi_form">
    <label for="input1"class="left_column">Input 1</label>
    <input name="input1" id="input1" type="text" class="left_column" />
    <label for="input2"class="right_column">Input 2</label>
    <input name="input2" id="input2" type="text" class="right_column" /><br class="clearfix" />
    <label for="input3" class="left_column">Input 3</label>
    <input name="input3" id="input3" type="text" class="left_column" />
    <label for="input4"class="right_column">Input 4</label>
    <input name="input4" id="input4" type="text" class="right_column" />
</form>
<hr />
<!-- More elements as needed -->

这与JSF无关。JSF所做的就是生成一堆HTML。无论您得到的是什么HTML目标答案（或重复的问题链接），都应该很容易地将其后移植到JSF，因为它只允许在组件周围内联纯HTML。我删除了JSF标记。
行是可以的，因为
hr
是一行。另一方面，字段实际上不是表行。因此，使用CSS
float
style。
.left_column {
    float: left;
}
label.right_column {
    margin-left: 60px;
}
.clearfix {
    clear: both;
}