vue中更改confirm的确定与取消按钮的位置并居中显示

最新推荐文章于 2024-05-09 11:07:04 发布

gmq1999

最新推荐文章于 2024-05-09 11:07:04 发布

阅读量5k

点赞数

文章标签： vue elementui web app css

本文链接：https://blog.csdn.net/gmq1999/article/details/119277547

版权

第一次：尝试使用elementui中的内置样式写入失败

第二次：尝试网站上说的给取消按钮添加float:right并设置margin-right，确定按钮与取消按钮成功换位置，但父级的text-align:center失效，两个按钮都居右显示。代码及效果如下：

.el-message-box__btns {
  text-align: center;
}
//给取消按钮起类名为btn-custom-cancel
.btn-custom-cancel {
  float: right;
  margin-left: 10px;
}

第三次：对确定按钮和取消按钮都添加float:right并设置margin-left，并在父级添加margin-left，在视觉效果上将样式强制变成了按钮位置互换并居中显示。代码及效果如下：

.el-message-box__btns {
  margin-right: 23%;
}
.el-message-box__btns .el-button {
  float: right;
  margin-left: 10px;
}

对于此类要应用在整个项目的样式，写在全局样式表中，若仅写在单个vue文件的style中，并且style加入了scoped限制作用域，样式不生效考虑加入/deep/在样式前

关注