el-form-item 如何多组件不换行

Question

使用el-form-item布局控件，如图所示，在同一个el-form-item中的两个组件如何放入一行之中？

Answer 1

该回答引用NewBing

您可以使用flex布局来实现在同一个el-form-item中的两个组件放入一行之中。具体来说，您可以在el-form-item中添加一个div，然后将两个组件放入这个div中。然后，将这个div的样式设置为display:flex;flex-direction:row;justify-content:space-between;align-items:center;。这样就可以实现两个组件在同一行之中了。下面是一个示例代码：

<el-form-item label="Label">
  <div style="display:flex;flex-direction:row;justify-content:space-between;align-items:center;">
    <el-input placeholder="请输入内容"></el-input>
    <el-button>按钮</el-button>
  </div>
</el-form-item>

希望这可以帮到您！如果您还有其他问题，请随时问我。

---

源: 与必应的对话， 2023/4/21

• (1) vue el-form 一行里面放置多个 el-form-item_＊且听风吟的博客-CSDN博客. https://blog.csdn.net/HH18700418030/article/details/101032575.

• (2) element的form表单中如何一行显示多el-form-item标签_migexiaoliang的博客-CSDN博客. https://blog.csdn.net/migexiaoliang/article/details/126336394.

• (3) 实现el-form一行中多个el-form-item_el-form 行内表单 个数_JonyM的博客-CSDN博客. https://blog.csdn.net/JonyM/article/details/106015976.