如何佈局形式

比方說，我想我的佈局頁是這樣的：如何佈局形式

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

如何佈局形式

回答

相關問題