JSP/JSF中的输入字段对齐

Question

如何对齐JSF panelGrid中的所有输入字段?我已经尝试使用下面的代码来对齐字段，但是第一个输入字段没有正确对齐。

代码如下:

<h:form id="MF">
<div align="center" class="form-align">
<div align="left" class="block-align use-border" style="width:80%">
<div align="left" class="block-align" style="width:100%">
<h:panelGrid columns="2" frame="none" cellspacing="2" cellpadding="2">
<h:column>
<h:outputText id="lbl1" styleClass="lbltxt" value="#{---}" style="width:200px;"/>
</h:column>
<h:column>
<h:panelGrid columns="2" frame="none" cellspacing="2" cellpadding="2">
<h:column>
<h:inputText id="txt1" value="#{---}" styleClass="inputfld" size="10" maxlength="6" onfocus="gotFocusEvents(this)" onkeydown="keyDownEvents(this)" onkeypress="keyPressEvents(this)" onkeyup="keyUpEvents(this)"/>
</h:column>
<h:column>
<h:outputLabel id="outlbl1" for="txt1" styleClass="lbltxt"/>
</h:column>
</h:panelGrid>
</h:column>
</h:panelGrid>
</div>
</div>
<br>
<%---------------------------------------------------------------------------------------------------------%>
<div align="left" class="block-align use-border" style="width:80%">
<div align="left" class="block-align" style="width:100%">
<h:panelGrid columns="2" frame="none" cellspacing="2" cellpadding="2">
<h:column>
<h:outputText id="lbl2" value="#{---}" styleClass="lbltxt" style="width:200px;"/>
</h:column>
<h:column>
<h:inputText id="txt2" value="#{---}" styleClass="inputfld" size="10" readonly="true"/>
</h:column>
<h:column>
<h:outputText style="text-align:left;" id="lbl3" styleClass="lbltxt" value="#{---}"/>
</h:column>
<h:column>
<h:inputTextarea id="txt3" value="#{---}"
styleClass="inputfld" rows="10" cols="65"
onfocus="gotFocusEvents(this)" onkeydown="keyDownEvents(this)" onkeypress="keyPressEvents(this)">
</h:inputTextarea>
</h:column>
<h:column>
<h:outputText id="lbl4" value="#{---}" styleClass="lbltxt" style="width:200px;"/>
</h:column>
<h:column>
<h:inputTextarea id="txt4" value="#{---}"
styleClass="inputfld" rows="10" cols="65"
onfocus="gotFocusEvents(this)" onkeydown="keyDownEvents(this)" onkeypress="keyPressEvents(this)">
</h:inputTextarea>
</h:column>
</h:panelGrid>
</div>
</div>
</div>
</h:form>

我已经尝试从浏览器中清除缓存并重新运行服务器，但问题仍然存在

Answer 1

我猜你的标签在下表中超过了200px的宽度。

你应该添加另一个样式类到所有标签(h:outputText)定义宽度和最小宽度。将值设置为要对齐的表中最宽的标签。

你也应该避免直接样式化元素，如果可能的话，以节省你自己和其他人在这段代码从不必要的混乱和不一致的风格。