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

标签 html css

我有一个表格。

这是目前的样子: 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/

上一篇：java - JSTL:嵌套的 forEach 循环。内容不显示在单独的行中

下一篇：html - 如何让我的 flexbox 网格有 2 行和 3 列，但仍然居中？

相关文章：

javascript - 表格上的双水平滚动 - JQuery

javascript - 为网站选择正确的设计？

html - 如何在之前和之后使用带有背景颜色的插图框阴影？

javascript - HTML5 Canvas 成长圈

jquery获取img src并添加为另一个div中的背景

javascript - 如何替换文本以创建 div 类

html - 网格元素 CSS 之间不需要的空间

javascript - 自定义全宽 Slick-Slider

css - R Shiny 的编辑标题

html - 我想让表格固定在页眉和页脚之间

©2024 IT工具网  联系我们