（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.