Question

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

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

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

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

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

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

我会使用<table>来布局表单对象，使用<hr>来表示行。

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

Shoud我最好使用<div>元素进行此布局？或者你会怎么做？

Answer 1

使用表单，您可以设置labels和inputs的样式。你应该这样做。

修改

快速而肮脏的版本。根据需要进行调整。

<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>  <input type="checkbox" /> div.labelLeft{float:left; width:250px;} div.labelright{float:right; width:250px;} label{border:1px solid red;}

http://jsfiddle.net/jasongennaro/XzhDd/

Answer 2

你可以在没有<h:panelGrid>的情况下离开为每个输入添加styleClass 并处理这些标签的CSS

您可能只需要这两个属性：display : inline和float : left / right

Answer 3

您可以查看一个blueprintCSS，了解他们如何做form layouts。基本上他们有一个960网格系统，你也可以使用它来布局你的表格。

960.gs也值得一看。

Answer 4

以下是一个工作示例：http://jsfiddle.net/gcummins/HHMu7/。您可以浮动左侧的标签/输入，并为右侧的标签提供左边距，以强制它们超出左侧输入。

标记：

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

CSS：

.left_column {
    float: left;
}
label.right_column {
    margin-left: 60px;
}
.clearfix {
    clear: both;
}

如何布局表单

4 个答案: