表单中横向显示

要在表单中横向显示字段，可以使用 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。
运行以上代码，你就可以看到表单中的字段横向排列了。