在不改变 HTML 的情况下，使用 CSS 或 JavaScript 将字段输入到下一行

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

请检查这是否有助于您实现所需的样式

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

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

Answer 2

您可以使用 + 选择器

#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>

在不改变 HTML 的情况下，使用 CSS 或 JavaScript 将字段输入到下一行

Input field to the next line with CSS or JavaScript without altering the HTML

javascript

css

newsletter

survey