html 表单将输入字段与复选框对齐
html form align input fields with check boxes
我有一个 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.
但如果不弄乱对齐就无法做到这一点。
任何帮助是极大的赞赏。提前致谢
经过反复试验,我明白了。
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>
我有一个 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.
但如果不弄乱对齐就无法做到这一点。 任何帮助是极大的赞赏。提前致谢
经过反复试验,我明白了。
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>