使用CSS或JavaScript将字段输入到下一行而不更改HTML

Question

我正在开展调查，在我工作的系统上，我无权直接更改HTML，但我可以在现有代码中添加CSS或JavaScript。

我有以下HTML，我希望输入字段位于第一个名称的正下方。我只能使用ID，因为我不想更改它们的许多其他字段中的类是相同的。我有点堆叠所以如果有人有想法我真的很感激。谢谢！

<div id="pnlPersonalDetails2">

</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
  <tbody>
    <tr>
      <td colspan="2" class="pd_question">
        <span id="lbl2"></span>
      </td>
    </tr>
    <tr>
      <td class="pd_label">FIRST NAME<span class="red"> *</span></td>
      <td>
        <input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
      </td>
      <td class="error_label">
        <span id="ctl03" style="visibility:hidden;">Required Field</span>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您可以使用+选择器

#pnlPersonalDetails2 + .surveyquestions td {
  display:block;
}

<div id="pnlPersonalDetails2">

</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
  <tbody>
    <tr>
      <td colspan="2" class="pd_question">
        <span id="lbl2"></span>
      </td>
    </tr>
    <tr>
      <td class="pd_label">FIRST NAME<span class="red"> *</span></td>
      <td>
        <input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
      </td>
      <td class="error_label">
        <span id="ctl03" style="visibility:hidden;">Required Field</span>
      </td>
    </tr>
  </tbody>
</table>

<div id="someId"></div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
  <tbody>
    <tr>
      <td colspan="2" class="pd_question">
        <span id="lbl2"></span>
      </td>
    </tr>
    <tr>
      <td class="pd_label">FIRST NAME<span class="red"> *</span></td>
      <td>
        <input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
      </td>
      <td class="error_label">
        <span id="ctl03" style="visibility:hidden;">Required Field</span>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

请检查这是否有助于您实现所需的风格

td.pd_label ~ td {
    float: left;
    position: absolute;
    left: 7px;
    margin-top: 1em;
}

相同的选择器（td.pd_label~td）也适用于JavaScript。