vue怎样横向布局代码

在Vue中横向布局的方式有很多种，以下是其中一种常见的方法：

可以使用flex布局，将父元素设置为display:flex，然后设置子元素的flex属性来控制子元素的宽度和高度。

示例代码如下：

<template>
  <div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
  </div>
</template>

<style>
.container {
  display: flex;
  justify-content: space-between; /* 子元素之间的间距相等 */
}

.item {
  flex: 1; /* 子元素均分宽度 */
  height: 100px;
  background-color: #ccc;
  margin-right: 10px; /* 子元素之间的间距 */
}
</style>

这样，三个子元素就可以横向均分父元素的宽度，并且中间有间距。