配售旁的複選框彼此

-1

我想放置複選框以及表彼此相鄰以正確對齊。我似乎把我已經在同一行彼此旁邊創建的三個複選框，但我無法正確地整齊排列它們。我發現在使用記事本++作爲我的開發工具格式化他們一些困難。配售旁的複選框彼此

需要幫助的這一個。

這裏是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>

來源

2017-09-14 cerberus99

你必須把輸入元素也連續和細胞第一。表中的輸入標記無效。 –

@BenjaminSchüller感謝您的反饋。你的意思是這樣的水平：計算天數固定時的人數
– cerberus99

我把糾正輸入一個答案來顯示它應該是什麼樣子等。該評論是不正確的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>

來源

2017-09-14 09:36:32

謝謝一堆，先生。現在看起來好多了。 – cerberus99

配售旁的複選框彼此

回答

相關問題