将复选框彼此相邻放置

Question

我希望将复选框和表格放在一起，并保持正确的对齐方式。我似乎可以将我在彼此旁边创建的三个复选框放在同一行中，但我无法正确整齐地对齐它们。我发现使用Notepad ++作为我的开发工具来格式化它们有些困难。

需要帮助。

这是CSS和HTML代码。在此HTML部分下，复选框包含在其中创建的相应表。我已将所有代码与评论＆＃39; Scenario 1,2,3和Main＆＃39;分开。

＆＃13;

＆＃13;

td.left {
  text-align: left;
}

th {
  border: 1.5px solid #4682B4;
  text-align: center;
  padding: 2px;
}

＆＃13;

<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
  <table style="width:20%" align="left">

    <input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed<br>

    <tr>
      <td>Number of Days</td>
      <td class="left"><input type="text" id="numDays" /></td>
    </tr>

    <tr>
      <td>Head Count</td>
      <td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
    </tr>

  </table>
</form>
<!--End of Form For Scenario 1-->

<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
  <table style="width:20%" align="left">

    <input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed<br>
    <tr>
      <td>Number of Head Count</td>
      <td class="left"><input type="text" id="numHeadC" /></td>
    </tr>

    <tr>
      <td>Number of Days</td>
      <td class="left"><input type="text" name="days" id="days" /> Days</td>
    </tr>

  </table>
</form>
<!--End of Form For Scenario 2-->

<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
  <table style="width:20%" align="left">

    <input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output<br>
    <tr>
      <td>Daily Output</td>
      <td class="left"><input type="text" id="output" /></td>
    </tr>

    <tr>
      <td>Headcount II</td>
      <td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
    </tr>
  </table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>

<!--Main-->
<form id="radioForm2" method="get" align="center">
  <table style="width:30%" align="center">

    <tr>
      <td>Total</td>
      <td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
    </tr>

    <tr>
      <td>Standard Hour</td>
      <td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
    </tr>

    <tr>
      <td>Earn Hour</td>
      <td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
    </tr>

    <tr>
      <td>Output Per Day</td>
      <td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
    </tr>

  </table>
</form>
<!--End of Form-->
<br><br><br>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我将更正后的输入放在答案中，以显示它应该是什么样子。评论不适合html片段。但这个答案仍未解决观点问题。

＆＃13;

＆＃13;

td.left {
  text-align: left;
}

th {
  border: 1.5px solid #4682B4;
  text-align: center;
  padding: 2px;
}

＆＃13;

<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
  <table style="width:20%" align="left">

    <tr>
      <td colspan="2"><input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed</td>
    </tr>
    <tr>
      <td>Number of Days</td>
      <td class="left"><input type="text" id="numDays" /></td>
    </tr>

    <tr>
      <td>Head Count</td>
      <td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
    </tr>

  </table>
</form>
<!--End of Form For Scenario 1-->

<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
  <table style="width:20%" align="left">

    <tr>
      <td colspan="2"><input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed</td>
    </tr>
    <tr>
      <td>Number of Head Count</td>
      <td class="left"><input type="text" id="numHeadC" /></td>
    </tr>

    <tr>
      <td>Number of Days</td>
      <td class="left"><input type="text" name="days" id="days" /> Days</td>
    </tr>

  </table>
</form>
<!--End of Form For Scenario 2-->

<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
  <table style="width:20%" align="left">

    <tr>
      <td colspan="2"><input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output</td>
    </tr>
    <tr>
      <td>Daily Output</td>
      <td class="left"><input type="text" id="output" /></td>
    </tr>

    <tr>
      <td>Headcount II</td>
      <td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
    </tr>
  </table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>

<!--Main-->
<form id="radioForm2" method="get" align="center">
  <table style="width:30%" align="center">

    <tr>
      <td>Total</td>
      <td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
    </tr>

    <tr>
      <td>Standard Hour</td>
      <td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
    </tr>

    <tr>
      <td>Earn Hour</td>
      <td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
    </tr>

    <tr>
      <td>Output Per Day</td>
      <td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
    </tr>

  </table>
</form>
<!--End of Form-->
<br><br><br>

＆＃13;

＆＃13;

＆＃13;