隣り合わせにチェックボックスを配置する

Question

チェックボックスとテーブルを適切な位置合わせで並べて配置します。私が作成した3つのチェックボックスを同じ行に置くように見えるかもしれませんが、それらをすべて適切かつ整然と並べることはできません。開発ツールとしてNotepad ++を使用して書式を設定する際にいくつかの問題があります。

この件に関するヘルプが必要です。

ここには、CSSコードとHTMLコードがあります。このHTMLセクションでは、チェックボックスはそれぞれに作成されたテーブルで構成されています。私はすべてのコードをコメント「シナリオ1,2,3およびメイン」で区切った。

td.left { 
 
    text-align: left; 
 
} 
 

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

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

Answer 1

私はそれはのようになりますどのように表示する答えに補正された入力を置きます。コメントはhtmlスニペットの適切な場所ではありません。しかし、この答えはまだビューの問題を解決しませんでした。

td.left { 
 
    text-align: left; 
 
} 
 

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

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