html - 如何将多个 Struts 文本字段以一种形式放置到 4 个单独的 block 中？

Question

我正在使用 Struts 2 创建一个 Web 应用程序。我有几种具有多个文本字段的表单。我想将文本字段定位为四个 block ，但由于 struts 标签无法识别 div 标签而遇到了一些困难，因此我无法使用 CSS 进行定位。我知道我可以使用 cssClass，但定位每个 Struts 文本字段标签似乎非常费力!

<div id="updateMedicalInfoForm">        
  <s:form action="editNewUser">
    <img src="images/icaremark.jpg" alt="">
    <h1>Travel <br>Companion</h1>
    <div id="spacer"></div>
    <div id="spacer2"></div>

    <div id="medInfoEdit">
    <h2>Medical Information</h2>
    <s:textfield label="Doctor Name"  name="medicalInfo.doctorName" size="20" />
    <s:textfield label="PracticeName"  name="medicalInfo.practiceName" size="20"/>
    <s:textfield label="Contact Number"  name="medicalInfo.practiceNumer" size="20"/>
    <s:textfield label="Allergies"  name="medicalInfo.allergies" size="20"/>
    <s:textfield label="Medication(s)"  name="medicalInfo.medications" size="20"/>
    </div>
    <div id="surgeryAddressEdit">
    <h2>Surgery Address</h2>

    <s:textfield label="Name / No." name="medicalInfo.address.houseName" size="20" />
    <s:textfield label="Address line 1" name="medicalInfo.address.addressLine1" size="20"/>
    <s:textfield label="Address line 2" name="medicalInfo.address.addressLine2" size="20"/>
    <s:textfield label="City" name="medicalInfo.address.City" size="20"/>
    <s:textfield label="Postcode" name="medicalInfo.address.postcode" size="20"/>
    <s:textfield label="Country" name="medicalInfo.address.country"  size="20"/>
    </div>
    <div id="emergencyContactEdit">
    <h2>Emergency Contact</h2>

    <s:textfield label="Title" name="medicalInfo.nextOfKin.title" size="20" />
    <s:textfield label="First Name" name="medicalInfo.nextOfKin.fName" size="20"/>
    <s:textfield label="Last Name" name="medicalInfo.nextOfKin.lName" size="20"/>
    <s:textfield label="Contact Number" name="medicalInfo.nextOfKin.contactNum" size="20"/>
    <s:textfield label="Email" name="medicalInfo.nextOfKin.email" size="20"/>
    <s:textfield label="Relationship" name="medicalInfo.nextOfKin.relationship" size="20"/>
    </div>
    <div id="emergencyContactAddressEdit">
    <h2>Emergency Contact Address</h2>

    <s:textfield label="House Number / Name" name="medicalInfo.nextOfKin.address.houseName" size="20" />
    <s:textfield label="Address 1" name="medicalInfo.nextOfKin.address.addressLine1" size="20"/>
    <s:textfield label="Address 2" name="medicalInfo.nextOfKin.address.addressLine2" size="20"/>
    <s:textfield label="City" name="medicalInfo.nextOfKin.address.City" size="20"/>
    <s:textfield label="Postcode" name="medicalInfo.nextOfKin.address.postcode" size="20"/>
    <s:submit name="update" id="redButton" value="%{getText('button.update')}"/>
    </div>
</s:form>

Answer 1

如果您使用默认的 "xhtml" theme 那么表单标签也将发出表格标记。在不了解您的配置的情况下，我会说这是您当前的问题。您需要做的就是添加分隔表行。

如果您使用的是 "simple" theme 然后你可以随心所欲地移动东西，但是你会失去一些功能，比如自动放置错误消息。

使用 "css_xhtml" theme 可能是一个更合适的解决方案，但有几个“陷阱”，最值得注意的是需要制作 <br/>标签元素在您的表单中实际上并没有中断，但这是微不足道的 CSS。

如果您必须在整个站点中执行此操作，您可能需要考虑推出自己的主题。