刚开始是这样的代码:
<div class="flex">
<span>选择模型:</span>
<n-select :options="state.chatModelOptions" />
</div>
选择模型换行了…不行,这个效果不行,修改后:
<div class="flex items-center whitespace-nowrap">
<span class="mr-2">选择模型:</span>
<n-select :options="state.chatModelOptions" class="flex-1" />
</div>
这里做了几个调整:
items-center
:垂直居中对齐flex子项。mr-2
:给span
标签添加了一个margin-right以提供一些空间。whitespace-nowrap
:防止内容换行。flex-1
:允许n-select
组件伸展并填充剩余的空间。