uniapp表单顶部对齐

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，可以编译到 iOS、Android、Web（包括微信小程序）等平台。在 uni-app 中实现表单顶部对齐，通常是指在页面上使得表单元素如输入框、按钮等在顶部位置保持一致的对齐方式。这可以通过CSS样式来完成，具体方法如下：

1. 使用 CSS Flexbox 布局：通过设置父容器的 `display` 属性为 `flex` 并使用 `justify-content: flex-start;` 可以实现子元素在顶部水平对齐。

2. 使用 CSS Grid 布局：通过定义一个网格布局，并将行对齐设置为 `start`，同样可以使表单元素在顶部对齐。

3. 手动设置位置：给每个表单元素设置固定的高度和上边距（`margin-top`）也可以实现顶部对齐，但这通常不是最灵活的方法。

以下是使用Flexbox实现表单顶部对齐的示例代码：

<template>
  <view class="form-container">
    <view class="form-item">
      <input type="text" placeholder="输入内容" />
    </view>
    <view class="form-item">
      <button>提交</button>
    </view>
  </view>
</template>

<style>
.form-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.form-item {
  margin-bottom: 10px; /* 根据需要调整间距 */
}
</style>

在这个例子中，`.form-container` 类定义了一个flex容器，其子元素 `.form-item` 会沿着顶部对齐。