并排放置两个输入字段可以通过使用HTML和CSS来实现。以下是一种常见的方法:
<form>
标签创建表单,使用<input>
标签创建输入字段。<form>
<label for="input1">输入字段1:</label>
<input type="text" id="input1" name="input1"><br><br>
<label for="input2">输入字段2:</label>
<input type="text" id="input2" name="input2"><br><br>
<input type="submit" value="提交">
</form>
display
属性和float
属性来实现并排放置。form {
width: 400px;
}
label, input {
display: block;
margin-bottom: 10px;
}
input[type="submit"] {
display: inline-block;
margin-top: 10px;
}
在上述代码中,display: block;
将每个输入字段和标签显示为块级元素,使它们垂直排列。margin-bottom
属性用于在每个输入字段之间添加一些间距。display: inline-block;
将提交按钮显示为内联块级元素,使其与输入字段并排放置。margin-top
属性用于在提交按钮上方添加一些间距。
这样,两个输入字段就可以并排放置在一个表单中了。你可以根据需要调整表单的宽度和输入字段的样式。
领取专属 10元无门槛券
手把手带您无忧上云