Q-Select选择选项时输入框偏移错位问题修复咨询

使用Quasar框架的q-select组件（启用多选、filled和square样式）时，选择选项后输入框会出现轻微的边距偏移，导致与水平对齐的其他字段错位。

原始代码 #

<div id="q-app">
  <div style="width: 100%">
    <q-select square class="input-left" filled v-model="selectModel" :options="['A', 'B', 'C']" :multiple="true" label="Enter" />
    <!-- 原代码存在多余的</q-select>标签，已移除 -->
    <q-select class="input-right" square filled v-model="select" :options="['A', 'B', 'C']" :multiple="true" label="Enter"></q-select>
  </div>
  <div style="width: 100%">
    <q-select square class="input-left" filled v-model="selectModel" :options="['A', 'B', 'C']" :multiple="true" label="Enter" />
    <!-- 原代码存在多余的</q-select>标签，已移除 -->
    <q-select class="input-right" square filled v-model="select" :options="['A', 'B', 'C']" :multiple="true" label="Enter"></q-select>
  </div>
</div>

问题原因 #

1. DOM结构错误：原始代码中存在多余的</q-select>闭合标签，导致组件渲染异常，触发布局偏移。
2. 默认样式变化：Quasar的q-select在聚焦/选中状态时，默认会添加outline或调整边框样式，导致组件尺寸发生细微变化，破坏水平对齐。

修复方案 #

1. 修正DOM结构

先移除代码中多余的</q-select>标签，确保组件DOM结构正确。

2. 添加自定义CSS固定尺寸

通过CSS强制固定组件尺寸，覆盖激活状态下可能导致偏移的样式：

/* 让输入框平分父容器宽度，确保水平对齐 */
.input-left, .input-right {
  flex: 1;
  min-width: 0;
}

/* 移除聚焦时的outline，避免尺寸变化 */
.q-field--focused .q-field__control {
  outline: none !important;
}

/* 统一filled样式下的内边距，确保高度一致 */
.q-select.filled .q-field__control {
  padding: 0.5rem 1rem;
  box-sizing: border-box;
}

3. 优化父容器布局

给包含q-select的父容器添加flex布局，实现稳定的水平排列：

<div id="q-app">
  <div style="width: 100%; display: flex; gap: 1rem;">
    <q-select square class="input-left" filled v-model="selectModel" :options="['A', 'B', 'C']" :multiple="true" label="Enter" />
    <q-select class="input-right" square filled v-model="select" :options="['A', 'B', 'C']" :multiple="true" label="Enter"></q-select>
  </div>
  <div style="width: 100%; display: flex; gap: 1rem; margin-top: 1rem;">
    <q-select square class="input-left" filled v-model="selectModel" :options="['A', 'B', 'C']" :multiple="true" label="Enter" />
    <q-select class="input-right" square filled v-model="select" :options="['A', 'B', 'C']" :multiple="true" label="Enter"></q-select>
  </div>
</div>

说明 #

• flex:1让两个输入框平分父容器宽度，配合gap控制间距，确保水平对齐稳定。
• box-sizing: border-box保证内边距不会改变组件总尺寸。
• 移除聚焦时的outline，避免因轮廓线导致的视觉偏移。

内容的提问来源于stack exchange，提问作者jdost_26