uni-app UVUE怎么才可以实现横向布局？

在 UniApp 的 UVUE（Vue 3 + TypeScript）中，实现横向布局可以通过以下几种方式：

1. 使用 flex 布局

flex 布局是最常见的实现横向布局的方式。你可以将父容器的 display 属性设置为 flex，并设置 flex-direction 为 row。

<template>
  <view class="container">
    <view class="item">Item 1</view>
    <view class="item">Item 2</view>
    <view class="item">Item 3</view>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: row;
}

.item {
  margin: 10px;
  padding: 10px;
  background-color: #f0f0f0;
}
</style>

2. 使用 inline-block

你也可以将子元素的 display 属性设置为 inline-block，这样它们会排列在一行上。

<template>
  <view class="container">
    <view class="item">Item 1</view>
    <view class="item">Item 2</view>
    <view class="item">Item 3</view>
  </view>
</template>

<style>
.container {
  white-space: nowrap; /* 防止换行 */
}

.item {
  display: inline-block;
  margin: 10px;
  padding: 10px;
  background-color: #f0f0f0;
}
</style>

3. 使用 grid 布局

grid 布局也可以实现横向布局，你可以将父容器的 display 属性设置为 grid，并设置 grid-template-columns 来定义列的宽度。

<template>
  <view class="container">
    <view class="item">Item 1</view>
    <view class="item">Item 2</view>
    <view class="item">Item 3</view>
  </view>
</template>

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列，每列等宽 */
  gap: 10px; /* 列间距 */
}

.item {
  padding: 10px;
  background-color: #f0f0f0;
}
</style>

4. 使用 float

虽然 float 已经不太推荐使用，但你仍然可以使用它来实现横向布局。

<template>
  <view class="container">
    <view class="item">Item 1</view>
    <view class="item">Item 2</view>
    <view class="item">Item 3</view>
  </view>
</template>

<style>
.item {
  float: left;
  margin: 10px;
  padding: 10px;
  background-color: #f0f0f0;
}

.container::after {
  content: "";
  display: table;
  clear: both;
}
</style>