html表单横向排列

要实现 HTML 表单横向排列，可以使用 CSS 中的 `display: inline-block;` 属性。具体实现步骤如下：

1. 在 HTML 中，将表单元素放在一个 `<div>` 或 `<form>` 标签中，并设置其 class 属性为一个自定义的类名，例如 `horizontal-form`。

2. 在 CSS 中，选中该自定义类名，并设置其子元素（即表单元素）的 `display` 属性为 `inline-block`。

3. 为了避免表单元素之间出现间隔，可以设置其子元素的 `margin-right` 属性为 0，或者使用 CSS 选择器来选中最后一个表单元素，并将其 `margin-right` 属性设置为 0。

示例代码如下：

HTML:

<div class="horizontal-form">
  <label>姓名：</label>
  <input type="text">
  <label>邮箱：</label>
  <input type="email">
  <label>电话：</label>
  <input type="tel">
</div>

CSS:

.horizontal-form {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.horizontal-form label,
.horizontal-form input {
  display: inline-block;
  margin-right: 10px;
}

.horizontal-form input:last-child {
  margin-right: 0;
}

以上代码将表单元素横向排列，并且每个表单元素之间有 10px 的间隔。