（HTML）如何排列文本字段？
[英](HTML) How to line up text fields?
问题描述
I have a form. 
我有一个表格。
Here is what it currently looks like: 这是当前的样子：
And here is how I want it to look: 这就是我想要的样子：
How would I line up the fields like in the second screenshot? 我如何像第二个屏幕截图中那样排列字段？ Also, if anyone has any other tips to make it look nicer (like making the drop down boxes the same size) that would be awesome. 另外，如果有人有其他建议可以使它看起来更好（例如使下拉框的大小相同），那就太棒了。
<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
For each line of your form, you can wrap the first input and select with a div , and give that div a width to make your second input line up correctly. 对于表单的每一行，可以包装第一个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和一致的宽度。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
为什么输入的文本和密码字段未对齐？ - Why the input text and password fields are not line up?
如何自定义html文本字段 - How to customize html text fields
html，如何排列清楚？ - html,How to line it up clearly?
HTML / CSS：排列多个Label和Input字段 - HTML/CSS : Line up multiple Label and Input fields
通过适当的文字换行垂直排列输入字段 - Vertically line up input fields by proper text wrapping
如何在一行上显示三个文本字段 - how to display three text fields on one line
在新行中动态添加更多文本字段（html） - Add more text fields dynamically in new line (html)
如何使用 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?
如何在HTML中的div中逐行显示文本 - how to show line by line text in div in HTML
相关标签