如何在Pug中让两个Vuetify模板组件渲染在同一行？

要让编辑按钮和带提示框的复制按钮在同一行显示，核心是把两个组件放入统一的行布局容器，利用Vuetify的flex布局能力控制横向排列。以下是具体修改方案：

修改后的代码 #

v-flex.compact
  p(id='correspondence-comment-content' v-html='displayContent')
  span
//- 新增行布局容器，包裹两个操作组件
v-layout.row.align-center
  template(v-if='correspondence.createdBy === currentUser && isTicketEditable')
    a(@click='openEditDialog' class='mr-2')
      | Edit
  template
    span
      v-tooltip(top)
        template(#activator='{ on: ontooltip }' #prepend)
          v-btn(
            id='copyButton'
            ref='copyBtn'                    
            x-small
            v-on='{...ontooltip}'
            @click='copyContent'
          )
            v-icon(small color='grey darken-2' right) $vuetify.icons.faCopy
        span Copy content 

关键调整说明 #

• 用v-layout.row（等同于原生div.d-flex.flex-row）包裹两个template，强制内部元素横向排列
• 给编辑按钮添加mr-2类，增加与复制按钮的间距，优化视觉体验
• 移除了v-btn上的float-right，如果需要复制按钮靠右对齐，可给v-layout.row追加justify-space-between类：

  v-layout.row.align-center.justify-space-between
  

替代方案（纯样式控制） #

如果不想用Vuetify布局组件，也可以直接给组件根元素添加行内块样式：

template(v-if='correspondence.createdBy === currentUser && isTicketEditable')
  a(@click='openEditDialog' class='d-inline-block mr-2')
    | Edit
template
  span(class='d-inline-block')
    v-tooltip(top)
      //- 按钮代码保持不变

原代码换行的原因 #

原来的两个template是同级独立元素，没有被统一的布局容器包裹，渲染后各自占据块级空间，因此自动换行。通过flex布局或行内块样式，可强制它们在同一行显示。

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