(HTML) How to line up text fields?
Question
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 answers
solution1
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.
.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>
solution2
0 2017-08-23 03:30:40
您需要twitter bootstrap和bootstrap网格系统，它可以解决所有问题：)一种非自举解决方案是将您的数据填充到表中或创建行内div div和一致的宽度。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why the input text and password fields are not line up?
How to customize html text fields
html,How to line it up clearly?
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
Add more text fields dynamically in new line (html)
How can I get three bits of text to line up left, right, and centre using HTML and CSS?
How do I get HTML buttons with images in them to line up with text buttons?
how to show line by line text in div in HTML
Related Tags