（HTML）如何排列文本字段？
[英](HTML) How to line up text fields?
問題描述
我有一個表格。
這是當前的樣子：
這就是我想要的樣子：
我如何像第二個屏幕截圖中那樣排列字段？ 另外，如果有人有其他建議可以使它看起來更好（例如使下拉框的大小相同），那就太棒了。
<body> <form action="/action_page.php"> <input type="checkbox" name="JAILdead" value="dead"> Jailor: <input type="text" name="TIname"> <br> <input type="checkbox" name="TIdead" value="dead"> Town Investigative: <select name="TI"> <option value=" "> </option> <option value="sheriff">Sheriff</option> <option value="invest">Investigator</option> <option value="spy">Spy</option> </select> <input type="text" name="TIname"> <br> <input type="checkbox" name="TPdead" value="dead"> Town Protective: <select name="TP"> <option value=" "> </option> <option value="bg">Bodyguard</option> <option value="doctor">Doctor</option> </select> <input type="text" name="TPname"> <br> <input type="checkbox" name="TKdead" value="dead"> Town Killing: <select name="TK"> <option value=" "> </option> <option value="vet">Veteran</option> <option value="vig">Vigilante</option> </select> <input type="text" name="TKname"> <br> <input type="checkbox" name="TSdead" value="dead"> Town Support: <select name="TS"> <option value=" "></option> <option value="mayor">Mayor</option> <option value="mayor">Medium</option> <option value="ret">Retributionist</option> <option value="trans">Transporter</option> <option value="escort">Escort</option> </select> <input type="text" name="TSname"> <br> <input type="checkbox" name="RTdead" value="dead"> Random Town: <select name="RT"> <option value=" "> </option> <option value="sheriff">Sheriff</option> <option value="invest">Investigator</option> <option value="spy">Spy</option> <option value="bg">Bodyguard</option> <option value="doctor">Doctor</option> <option value="vet">Veteran</option> <option value="vig">Vigilante</option> <option value="mayor">Mayor</option> <option value="mayor">Medium</option> <option value="ret">Retributionist</option> <option value="trans">Transporter</option> <option value="escort">Escort</option> </select> <input type="text" name="RTname"> <br> <input type="checkbox" name="RTdead" value="dead"> Random Town: <select name="RT"> <option value=" "> </option> <option value="sheriff">Sheriff</option> <option value="invest">Investigator</option> <option value="spy">Spy</option> <option value="bg">Bodyguard</option> <option value="doctor">Doctor</option> <option value="vet">Veteran</option> <option value="vig">Vigilante</option> <option value="mayor">Mayor</option> <option value="mayor">Medium</option> <option value="ret">Retributionist</option> <option value="trans">Transporter</option> <option value="escort">Escort</option> </select> <input type="text" name="RTname"> <br> <input type="checkbox" name="RTdead" value="dead"> Random Town: <select name="RT"> <option value=" "> </option> <option value="sheriff">Sheriff</option> <option value="invest">Investigator</option> <option value="spy">Spy</option> <option value="bg">Bodyguard</option> <option value="doctor">Doctor</option> <option value="vet">Veteran</option> <option value="vig">Vigilante</option> <option value="mayor">Mayor</option> <option value="mayor">Medium</option> <option value="ret">Retributionist</option> <option value="trans">Transporter</option> <option value="escort">Escort</option> </select> <input type="text" name="RTname"> <br> <input type="checkbox" name="RTdead" value="dead"> Random Town: <select name="RT"> <option value=" "> </option> <option value="sheriff">Sheriff</option> <option value="invest">Investigator</option> <option value="spy">Spy</option> <option value="bg">Bodyguard</option> <option value="doctor">Doctor</option> <option value="vet">Veteran</option> <option value="vig">Vigilante</option> <option value="mayor">Mayor</option> <option value="mayor">Medium</option> <option value="ret">Retributionist</option> <option value="trans">Transporter</option> <option value="escort">Escort</option> </select> <input type="text" name="RTname"> <br> <input type="checkbox" name="GFdead" value="dead"> Godfather: <input type="text" name="GFname"> <br> <input type="checkbox" name="MAFdead" value="dead"> Mafioso: <input type="text" name="MAFname"> <br> <input type="checkbox" name="RMdead" value="dead"> Random Mafia: <select name="RM"> <option value=" "> </option> <option value="framer">Framer</option> <option value="bmer">Blackmailer</option> <option value="consort">Consort</option> <option value="consig">Consigliere</option> <option value="janitor">Janitor</option> <option value="disg">Disguiser</option> <option value="forger">Forger</option> </select> <input type="text" name="RMname"> <br> <input type="checkbox" name="RMdead" value="dead"> Random Mafia: <select name="RM"> <option value=" "> </option> <option value="framer">Framer</option> <option value="bmer">Blackmailer</option> <option value="consort">Consort</option> <option value="consig">Consigliere</option> <option value="janitor">Janitor</option> <option value="disg">Disguiser</option> <option value="forger">Forger</option> </select> <input type="text" name="RMname"> <br> <input type="checkbox" name="NEdead" value="dead"> Neutral Evil: <select name="NE"> <option value=" "> </option> <option value="exe">Executioner</option> <option value="witch">Witch</option> <option value="jester">Jester</option> </select> <input type="text" name="NEname"> <br> <input type="checkbox" name="NKdead" value="dead"> Neutral Killing: <select name="NK"> <option value=" "> </option> <option value="sk">Serial Killer</option> <option value="ww">Werewolf</option> <option value="arso">Arsonist</option> </select> <input type="text" name="NKname"> <br> <input type="checkbox" name="guydead" value="dead"> 1: <input type="text" name="guynotes"> <br> <input type="checkbox" name="guydead" value="dead"> 2: <input type="text" name="guynotes"> <br> <input type="checkbox" name="guydead" value="dead"> 3: <input type="text" name="guynotes"> <br> <input type="checkbox" name="guydead" value="dead"> 4: <input type="text" name="guynotes"> <br> <input type="checkbox" name="guydead" value="dead"> 5: <input type="text" name="guynotes"> <br> <input type="checkbox" name="guydead" value="dead"> 6: <input type="text" name="guynotes"> <br> <input type="checkbox" name="guydead" value="dead"> 7: <input type="text" name="guynotes"> <br> <input type="checkbox" name="guydead" value="dead"> 8: <input type="text" name="guynotes"> <br> <input type="checkbox" name="guydead" value="dead"> 9 : <input type="text" name="guynotes"> <br> <input type="checkbox" name="guydead" value="dead"> 10: <input type="text" name="guynotes"> <br> <input type="checkbox" name="guydead" value="dead"> 11: <input type="text" name="guynotes"> <br> <input type="checkbox" name="guydead" value="dead"> 12: <input type="text" name="guynotes"> <br> <input type="checkbox" name="guydead" value="dead"> 13: <input type="text" name="guynotes"> <br> <input type="checkbox" name="guydead" value="dead"> 14: <input type="text" name="guynotes"> <br> <input type="checkbox" name="guydead" value="dead"> 15: <input type="text" name="guynotes"> </form> </body>
2 個解決方案
解決方案1
1 2017-08-23 03:48:39
對於表單的每一行，可以包裝第一個input並使用div select ，並為該div一個寬度，以使第二個input行正確對齊。
.form-portion-1 { display: inline-block; width: 260px; /*modify this value to fit your form*/ } .form-portion-1 select { float: right; width: 100px; /*modify this value to fit your form*/ }
<body> <form action="/action_page.php"> <div class="form-portion-1"> <input type="checkbox" name="JAILdead" value="dead"> Jailor: </div> <input type="text" name="TIname"> <br> <div class="form-portion-1"> <input type="checkbox" name="TIdead" value="dead"> Town Investigative: <select name="TI"> <option value=" "> </option> <option value="sheriff">Sheriff</option> <option value="invest">Investigator</option> <option value="spy">Spy</option> </select> </div> <input type="text" name="TIname"> <br> <div class="form-portion-1"> <input type="checkbox" name="TPdead" value="dead"> Town Protective: <select name="TP"> <option value=" "> </option> <option value="bg">Bodyguard</option> <option value="doctor">Doctor</option> </select> </div> <input type="text" name="TPname"> <br> <div class="form-portion-1"> <input type="checkbox" name="TKdead" value="dead"> Town Killing: <select name="TK"> <option value=" "> </option> <option value="vet">Veteran</option> <option value="vig">Vigilante</option> </select> </div> <input type="text" name="TKname"> </form> </body>
解決方案2
0 2017-08-23 03:30:40
您需要twitter bootstrap和bootstrap網格系統，它可以解決所有問題：)一種非自舉解決方案是將您的數據填充到表中或創建行內div div和一致的寬度。
如何使用 HTML 和 CSS 將三位文本排列在左、右和中間？
[英]How can I get three bits of text to line up left, right, and centre using HTML and CSS?
如何獲得帶有圖像的HTML按鈕與文本按鈕對齊？
[英]How do I get HTML buttons with images in them to line up with text buttons?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.