javascript - 用html在jsp页面上将文本移到左侧

Question

我正在尝试将教科书的文本“名字”和“姓氏”移动到左侧并将其与标题对齐。我使用两个单选按钮，一个用于显示文本框，一个用于隐藏文本框。我尝试了align=“left”和样式，但它不起作用。

<tr>
<td class="odd" width="20%" nowrap>
    <bean:message key="editvarref.header.name"/>
</td>
<td class="odd" width="80%">
    <div>
       <html:radio styleId="users_name_type_0" property="user_type" value="Show" onclick="getResults(this)" />
        <label for="user_name_type_0"><bean:message key="input.use.name"/></label>
    </div>
    <div style="padding-top:5px; padding-bottom:5px;">
        <html:radio styleId="no_name_type_1" property="user_type" value="Nothing" onclick="getResults(this)" />
        <label for="no_name_type_1"><bean:message key="no.use.name"/></label>
    </div>

    <div class="text">
        <p>First Name:
            <input type="text" name="text1" id="text1" maxlength="30">
         </p>
    </div>
    <div class="text">
        <p>Last Name:
            <input type="text" name="text1" id="text1" maxlength="30">
         </p>
     </div>

</td>

有没有办法可以将名字:”和“姓氏:”的值与 editvarref.header.name (即“用户信息:”)对齐

更新

除了将文本框与单选按钮对齐之外，如何将名字和姓氏移至左侧并将其与用户信息对齐。 /image/aUggI.png

Answer 1

无需对 html 结构进行太多更改，我建议将您的标题移至与您的 radio /输入相同的 td 中。

我已经把sample code在代码笔上。您将看到原始设计和修改后的设计。 CSS 适用于修改后的设计。

html:

<table class="table">
  <tr>
    <td class="odd" width="20%" nowrap>

    </td>
    <td class="odd" width="80%">
      <h2>User Information</h2>
      <div>
        <input type="radio" id="users_name_type_0" />
        <label for="user_name_type_0">Input User Info</label>
      </div>
      <div style="padding-top:5px; padding-bottom:5px;">
        <input type="radio" id="users_name_type_0" />
        <label for="no_name_type_1">Input Later</label>
      </div>

      <div class="text">
        <label for="text1">First Name:</label>
        <input type="text" name="text1" id="text1" maxlength="30">
      </div>
      <div class="text">
        <label for="text2">Last Name:</label>
        <input type="text" name="text2" id="text2" maxlength="30">
      </div>

    </td>
  </tr>
</table>

CSS:

.table{
  width: 600px;
}

.text label{
  display: block;
}

编辑:

我已将您的 jsp 标签替换为相应的 html 元素，以便它们在 codepen 中正确显示。