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>

使用CSS或JavaScript在下一行输入字段，而无需更改HTML

2 个答案: