html表单将输入字段与复选框对齐答案

【问题标题】：html form align input fields with check boxeshtml表单将输入字段与复选框对齐
【发布时间】：2019-11-18 06:09:43
【问题描述】：

我有一个 html 表单，其中有几个使用网格对齐的输入字段。

div.settings {
  display:grid;
  grid-template-columns: max-content max-content;
  grid-gap:5px;
}
div.settings label { text-align:left;  font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold }
div.settings label:after { content: "   "; }

  <form id="form_nav" action="/users/new_supplier" method="post"> 
    <div class="settings" style="padding: 2%">
        <label for="sc_suppllier_id">Supllier ID</label> <input id="sc_supplier_id" type="text" />  
        <label for="sc_supplier_name">Name</label> <input id="sc_supplier_name" type="text" style="width: 200%"/>
        <label for="sc_supplier_phone">Phone</label> <input id="sc_supplier_phone" type="text"/>
  </div> 
</form>

我想在供应商 ID 的同一行添加一个“活动”复选框。

 <input type="checkbox" name="active" value="active"> Active.

但是如果不弄乱对齐方式就无法做到这一点。任何帮助是极大的赞赏。提前致谢

【问题讨论】：

标签： html forms grid label html-input

【解决方案1】：

经过反复试验，我明白了。

div.settings {
  display:grid;
  grid-template-columns: max-content max-content;
  grid-gap:5px;
}
div.settings label { text-align:left;  font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold }
div.settings label:after { content: "   "; }

  <form id="form_nav" action="/users/new_supplier" method="post"> 
    <div class="settings" style="padding: 2%">
         <label for="sc_suppllier_id">Supllier ID</label> <a> <input id="sc_supplier_id" type="text"/> <input type="checkbox" id="sc_active"/> <label for="sc_active">Active</label> </a>
        <label for="sc_supplier_name">Name</label> <input id="sc_supplier_name" type="text" style="width: 200%"/>
        <label for="sc_supplier_phone">Phone</label> <input id="sc_supplier_phone" type="text"/>
  </div> 
</form>

【讨论】：