如何在Struts 2表单的字段间添加水平分隔线<hr/>？

我明白你的困扰——直接把<hr/>放进Struts 2表单里，结果全跑到表单上方去了，完全不是你想要的位置。这其实是Struts 2默认主题的锅，咱们一步步来解决：

为什么会出现这个问题？ #

Struts 2默认使用xhtml主题，这个主题会自动把表单渲染成HTML表格结构，所有表单控件都被包裹在<table>标签里。如果你直接在<s:form>里塞<hr/>，它会被渲染到表格的外部，自然就都堆在表单上方了。

两种解决方案任你选 #

方案1：切换到simple主题，自由布局

如果你想完全掌控表单的结构，不用Struts自动生成的表格，直接给表单加上theme="simple"属性就行。这样你可以随心所欲地在任何位置插入分隔线：

<s:form action="你的Action路径" theme="simple">
    <!-- 表单顶部的分隔线 -->
    <hr/>
    
    <!-- 第一组表单控件 -->
    <div style="margin: 10px 0;">
        <label>用户名：</label>
        <s:textfield name="username"/>
    </div>
    <div style="margin: 10px 0;">
        <label>密码：</label>
        <s:password name="password"/>
    </div>
    
    <!-- color和brightness区域之间的分隔线 -->
    <hr/>
    
    <!-- color & brightness控件 -->
    <div style="margin: 10px 0;">
        <label>颜色：</label>
        <s:textfield name="color"/>
    </div>
    <div style="margin: 10px 0;">
        <label>亮度：</label>
        <s:textfield name="brightness"/>
    </div>
    
    <!-- 表单底部的分隔线 -->
    <hr/>
    
    <!-- 提交按钮 -->
    <s:submit value="提交"/>
</s:form>

方案2：保留默认主题，在表格内插入分隔线

如果你不想放弃xhtml主题自带的表格布局，那可以手动在表格里添加跨列的行，把<hr/>放在里面，让它横跨整个表单宽度：

<s:form action="你的Action路径">
    <!-- 顶部分隔线：跨列的表格行 -->
    <s:tr>
        <s:td colspan="2">
            <hr/>
        </s:td>
    </s:tr>
    
    <!-- 第一组表单控件 -->
    <s:textfield name="username" label="用户名"/>
    <s:password name="password" label="密码"/>
    
    <!-- color和brightness之间的分隔线 -->
    <s:tr>
        <s:td colspan="2">
            <hr/>
        </s:td>
    </s:tr>
    
    <!-- color & brightness控件 -->
    <s:textfield name="color" label="颜色"/>
    <s:textfield name="brightness" label="亮度"/>
    
    <!-- 底部分隔线 -->
    <s:tr>
        <s:td colspan="2">
            <hr/>
        </s:td>
    </s:tr>
    
    <!-- 提交按钮 -->
    <s:submit value="提交"/>
</s:form>

这样分隔线就会乖乖出现在你想要的位置——表单顶部、两组控件之间，还有表单底部啦。你还可以给<hr/>加个CSS类，调整它的样式，比如粗细、颜色什么的，让它更贴合你的页面风格。

内容的提问来源于stack exchange，提问作者dacracot