Html 对齐页面上的输入控件
我有一个表单,有4个文本框,一个复选框和一个选择框,它们的标签在左边。这是我的密码:Html 对齐页面上的输入控件,html,css,Html,Css,我有一个表单,有4个文本框,一个复选框和一个选择框,它们的标签在左边。这是我的密码: <fieldset class="form-field"> <legend> <label class="form-field k-checkbox">Parent Material</label> </legend> <ul class="form-field">
<fieldset class="form-field">
<legend>
<label class="form-field k-checkbox">Parent Material</label>
</legend>
<ul class="form-field">
<li>
<label for="use_test_certificate" class="form-field">Use Test Certificate</label>
<input type="checkbox" name="use_test_certificate" class="k-checkbox form-field" />
</li>
<li>
<label for="parent_material" class="form-field">Material</label>
<select name="parent_material" class="form-field"></select>
</li>
<li>
<label for="proof_stress" class="form-field">0.2% Proof Stress</label>
<input type="text" name="proof_stress" size="24" maxlength="23" style="width:170px;" class="k-textbox form-field" />
</li>
<li>
<label for="do_weld_calculation" class="form-field">Do Weld Calculation</label>
<input type="checkbox" name="do_weld_calculation" class="k-checkbox form-field" />
</li>
<li>
<label for="weld_redistribution_factor" class="form-field">Weld Redistribution Factor</label>
<input type="text" name="weld_redistribution_factor" size="24" maxlength="23" style="width:170px;" class="k-textbox form-field" />
</li>
</ul>
</fieldset>
母材
-
使用测试证书
-
材料
-
0.2%验证应力
-
进行焊接计算
-
焊缝再分布系数
问题是“选择”显示在复选框旁边,而不是其标签旁边。当我增加窗口大小时,它会跳到我的第一个文本框旁边。我如何告诉它显示在标签旁边。我不是CSS专家。我通常可以自己解决问题,但这一点让我完全困惑。感谢您的帮助
Amanda既然你还没有展示你的CSS,我不妨向你展示一个理想的解决方案,只使用表单元素:) 注意我是如何将
名称
属性更改为id
。需要唯一的id
,通过标签for
属性来识别相应的标签
CSS
HTML
母材
使用测试证书
材料
0.2%验证应力
进行焊接计算
焊缝再分布系数
它没有这样做。你能加入你的CSS吗?这样我们可以更好地帮助你?
fieldset {
width: 500px;
}
label {
display: block;
float: left;
clear: left;
width: 200px;
margin: 10px;
}
input, select {
display: block;
float: left;
margin: 10px;
}
input[type=text] {
width: 170px;
}
<fieldset class="form-field">
<legend>Parent Material</legend>
<label for="use_test_certificate" class="form-field">Use Test Certificate</label>
<input type="checkbox" id="use_test_certificate" class="k-checkbox form-field" />
<label for="parent_material" class="form-field">Material</label>
<select id="parent_material" class="form-field"></select>
<label for="proof_stress" class="form-field">0.2% Proof Stress</label>
<input type="text" id="proof_stress" maxlength="23" class="k-textbox form-field" />
<label for="do_weld_calculation" class="form-field">Do Weld Calculation</label>
<input type="checkbox" id="do_weld_calculation" class="k-checkbox form-field" />
<label for="weld_redistribution_factor" class="form-field">Weld Redistribution Factor</label>
<input type="text" id="weld_redistribution_factor" maxlength="23" class="k-textbox form-field" />
</fieldset>