表单中横向显示
时间: 2024-02-05 19:10:35 浏览: 186
要在表单中横向显示字段,可以使用 CSS 中的 display: inline-block
属性。以下是一个简单的示例:
HTML 代码:
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email">
<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone">
<button type="submit">提交</button>
</form>
CSS 代码:
form label {
display: inline-block;
width: 80px;
text-align: right;
margin-right: 10px;
}
form input {
display: inline-block;
width: 200px;
}
在上面的 CSS 代码中,我们将 <label>
和 <input>
元素设置为 display: inline-block
,这样它们就会在同一行上显示。我们还设置了 <label>
元素的宽度为 80px,并使用 text-align: right
属性将标签文本右对齐。最后,我们设置了 <input>
元素的宽度为 200px。
运行以上代码,你就可以看到表单中的字段横向排列了。
相关推荐















