如何布局形式

比方说，我想我的布局页是这样的：如何布局形式

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>的线路。

但我不确定这是否是一个“很好”的解决方案。（我不喜欢所有的桌子都生成...）

我应该更好地使用<div>这个布局的元素？或者你会怎么做？

来源

2011-06-27 Sebi

这是不相关的JSF。所有的JSF都会生成一堆HTML。无论您获得哪种HTML针对性答案（或重复问题链接），它都应该轻松地回溯到JSF，因为它只允许在组件周围嵌入纯HTML。我删除了JSF标签。 – BalusC

'对于行很好，因为'hr' *是一行。另一方面，字段不是真正的*表行*。因此，使用CSS'float'风格。 –

通过表单，您可以设置样式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> &nbsp;<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/

来源

2011-06-27 14:48:18

你可以逃脱不<h:panelGrid> 添加的styleClass每个输入和处理CSS这些标签

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

来源

2011-06-27 14:49:37

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

960.gs也值得一看。

来源

2011-06-27 14:50:24 schmunk

这是一个工作示例：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; 
}

来源

2011-06-27 14:59:16

如何布局形式

回答

相关问题