<template #header> <div class="user-block"> <img class="img-circle" :src="'https://wpimg.wallstcn.com/57ed425a-c71e-4201-9428-68760c0537c4.jpg' + avatarPrefix"> <span class="username text-muted">设备一</span> <span class="description">教学理论设备</span> </div> <div > <span class="el-icon-setting" style="font-size: 25px; color: rgba(18, 21, 211, 0.829);" @click="update" ></span> </div> </template> 实现文字设备一与教学理论设备位置上下摆放，el-icon-setting 位置在文字“设备一”与“教学理论设备”右侧如何修改

你可以尝试在这段代码中添加一些 CSS 样式来实现你想要的布局，例如：

.user-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.username {
  margin-left: 10px;
}

.el-icon-setting {
  margin-left: 10px;
}

这些样式将会使得文字“设备一”与“教学理论设备”在同一行，并且将 `el-icon-setting` 的位置调整到文字的右侧。你可以根据实际需要调整样式中的值。

相关问题

<template #header> <div class="user-block"> <img class="img-circle" :src="'https://wpimg.wallstcn.com/57ed425a-c71e-4201-9428-68760c0537c4.jpg' + avatarPrefix"> <span class="username text-muted">设备一</span> <span class="description">教学理论设备</span> </div> <div > <span class="el-icon-setting" style="font-size: 25px; color: rgba(18, 21, 211, 0.829);" @click="update" ></span> </div> </template> 修改el-icon-setting 位置在文字右侧如何修改

你可以将 `el-icon-setting` 与文字放在同一个 `div` 中，并将该 `div` 的样式设置为 `display: flex; justify-content: space-between; align-items: center;`，这样它们就可以水平排列，而且 `el-icon-setting` 就会在文字的右侧了。具体地，你可以修改模板代码如下：

<template #header>
  <div class="user-block">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <div>
        <img class="img-circle" :src="'https://wpimg.wallstcn.com/57ed425a-c71e-4201-9428-68760c0537c4.jpg' + avatarPrefix">
        <span class="username text-muted">设备一</span>
        <span class="description">教学理论设备</span>
      </div>
      <span class="el-icon-setting" style="font-size: 25px; color: rgba(18, 21, 211, 0.829);" @click="update"></span>
    </div>
  </div>
</template>

这样修改后，`el-icon-setting` 就会在文字的右侧了。