<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 位置在文字右侧如何修改 文字上下排列显示
时间: 2024-04-04 08:35:05 浏览: 26
如果你想要将 `el-icon-setting` 放在文字的上方或下方,可以将样式改为 `display: flex; flex-direction: column; justify-content: center; align-items: center;`,这样它们就可以垂直排列了。具体地,你可以修改模板代码如下:
```
<template #header>
<div class="user-block" style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
<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>
</template>
```
这样修改后,`el-icon-setting` 就会在文字的上方了。如果你想要将其放在文字的下方,只需要将 `div` 和 `span` 的顺序交换即可。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<van-nav-bar> <template v-slot:right> 去注册 > </template> </van-nav-bar> 飞腾兔 国内领先的人力资源服务器 <van-field v-model="form.phoneNumber" clearable placeholder="11位手机号" class="custom-field" > <template #label> +86 <van-divider vertical /> </template> </van-field> <van-field v-model="form.idNumber" clearable placeholder="后六位" class="custom-field" > <template #label> 身份证 <van-divider vertical /> </template> </van-field> <van-button type="primary" class="btn" @click="getLogin"> 登 录 </van-button> <van-button @click="getRegister">身份证登录</van-button> 登录代表您已同意用户协议和隐私协议 给用户协议,加一个click事件,点击出现一个dialog,里面有协议内容
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)