在vuejs中，操作(按钮)位于左侧或右侧的文本字段

<template>
  <div class="flex-container">
    <input type="text" class="text-field">
    <button class="btn">操作按钮</button>
  </div>
</template>

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

.text-field {
  /* 样式设置 */
}

.btn {
  /* 样式设置 */
  margin-left: 10px; /* 或 margin-right: 10px; */
}
</style>

<template>
  <div class="grid-container">
    <input type="text" class="text-field">
    <button class="btn">操作按钮</button>
  </div>
</template>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr auto; /* 第一列占据剩余空间，第二列自适应宽度 */
}

.text-field {
  /* 样式设置 */
}

.btn {
  /* 样式设置 */
}
</style>

<template>
  <div class="float-container">
    <input type="text" class="text-field">
    <button class="btn">操作按钮</button>
    <div class="clearfix"></div>
  </div>
</template>

<style>
.float-container {
  /* 样式设置 */
}

.text-field {
  /* 样式设置 */
  float: left;
}

.btn {
  /* 样式设置 */
  float: right;
}

.clearfix {
  clear: both;
}
</style>