Quasar中q-item里的按钮如何水平排列?Flex布局不生效

柚溪 阅读 28

我在用Quasar的q-item组件做列表项,想让里面的两个按钮水平排列,但用了flex布局类还是上下显示:


<q-item>
  <q-item-section>
    <div class="row">
      <q-btn class="q-mr-sm" label="编辑" flat />
      <q-btn label="删除" color="negative" flat />
    </div>
  </q-item-section>
</q-item>

试过加no-wrap类、调整margin都没用,控制台也没报错,但按钮始终垂直排列。是不是q-item有特殊样式覆盖了?

我来解答 赞 2 收藏
二维码
手机扫码查看
2 条解答
宏赛~
宏赛~ Lv1
q-item-section 默认是块级元素,会把子元素撑开,你得加个 inline 属性让它变成行内样式。试试这样写:










差不多就是这个问题,inline 能解决。要是还不行,再看看其他样式是不是有冲突。
点赞
2026-02-17 19:17
书生シ梓奥
q-item-section默认是块级元素,加个inline属性就能让flex布局生效。改一下代码:


<q-item>
<q-item-section>
<div class="row inline">
<q-btn class="q-mr-sm" label="编辑" flat />
<q-btn label="删除" color="negative" flat />
</div>
</q-item-section>
</q-item>


搞定。
点赞 1
2026-02-16 16:06