个人中心
gpt4 book ai didi

html - (HTML) 如何排列文本字段？

转载 作者：太空宇宙 更新时间：2023-11-04 08:16:59 24 4
gpt4 key购买 nike

我有一个表格。

这是目前的样子: Sample

这是我想要的样子: Sample 2

如何像第二个屏幕截图那样排列字段？此外，如果有人有任何其他技巧可以使它看起来更好(例如使下拉框大小相同)，那就太棒了。

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

最佳答案

对于表单的每一行，您可以将第一个 input 和 select 包装在一个 div 中，然后给那个 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>

关于html - (HTML) 如何排列文本字段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45830155/

24 4 0
文章推荐： c - 将 Fork 用于命令行参数
文章推荐： Python:从具有相同 x 和 y 坐标的 X、Y、Z 文件中删除所有重复点的方法
文章推荐： 在 C 中使用 for 循环创建矩阵
文章推荐： python - pymongo 可以检测集合是否被限制了吗？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com