.elbutton+elbutton+el-dropdown,消除中间按钮的margin-left
时间: 2023-12-18 17:35:12 浏览: 11
要消除中间按钮的 `margin-left`,可以使用以下方式:
```css
.elbutton + .elbutton + .el-dropdown {
margin-left: 0;
}
```
这样设置的话,会选择所有具有 `.elbutton` 类的元素,并且该元素的下一个兄弟元素也具有 `.elbutton` 类,同时下一个兄弟元素的下一个兄弟元素是 `.el-dropdown` 类。然后,将 `margin-left` 设置为 0,以消除中间按钮的左边距。
相关问题
修改el-dropdown位置
要修改el-dropdown的位置,可以通过修改其style属性中的相关样式来实现。
在引用中的代码中,el-dropdown的样式是通过style属性设置的,可以通过修改其中的float、margin-right等属性来改变其位置。例如,将float的值改为left可以使其左浮动,将margin-right的值改为20px可以使其与右侧的距离增加到20像素。
在引用中的代码中,el-dropdown是通过将其放置在窗口的div中来实现位置的控制。可以通过修改窗口div的样式,例如设置其position属性为relative,再通过调整top、left等属性来改变el-dropdown的位置。
综上所述,可以通过修改el-dropdown元素的样式或所在容器的样式来实现修改el-dropdown的位置。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [修改el-dropdown-item长度,elementUI样式修改](https://blog.csdn.net/xixisi888/article/details/108204759)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [修改el-dropdown下拉框的样式,没有效果,所以将el-dropdown的html片段写在当前所在的div里面,而不是body...](https://blog.csdn.net/flyaway0624/article/details/116136943)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
<el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown @command="handleCommand" style="cursor:pointer"> <span>{{username}}</span><i class="el-icon-arrow-down" style="margin-left: 5px;"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item><span @click="goTo('/user')">个人信息</span></el-dropdown-item> <el-dropdown-item><span @click="goTo('')">退出登录</span></el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header>,这段代码里的{{username}}是获取当前用户名称,怎么和后端数据传递,请写出前端具体代码
前端需要向后端发送一个获取当前用户名称的请求,可以使用axios库来发送请求。具体代码如下:
```javascript
import axios from 'axios';
export default {
data() {
return {
username: ''
};
},
mounted() {
// 发送获取当前用户名称的请求
axios.get('/api/user/username')
.then(response => {
this.username = response.data.username;
})
.catch(error => {
console.log(error);
});
}
};
```
上面的代码中,我们使用axios发送一个GET请求,请求地址为`/api/user/username`,后端需要实现这个接口来返回当前用户的名称。当请求成功后,我们将返回的数据中的`username`赋值给组件的`username`属性,这样就可以在模板中使用`{{username}}`来显示当前用户的名称了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)