在项目中看到了UI这样的布局
image.png
但是项目用的是element-ui,它是这样的布局
image.png
所以得修改咯
首先找到它的样式
image.png
然后给他浮动,注(项目用的scss)
::v-deep {
.el-pagination {
width: 100%;
.el-pagination__jump {
float: right;
}
.btn-next {
float: right;
}
.el-pager {
float: right;
}
.btn-prev {
float: right;
}
}
}
- 注释: 本文里面使用的
::v-deep,也可以用/deep/,效果都是一样的啦... - 如果是使用
/deep/的话,就是这样的样式
/deep/ .pagination .el-pagination__jump {
float: right;
}
结果...
image.png
怎么给我反啦,
image.png
然后仔细看了一下,发现了问题
image.png
根据float:right的规则,是从html标签的顺序来的,比如第一个是
btn-prev,那么它就是在最右边,el-pager从右往左是倒数第二,btn-next是倒数第三,以此类推...我们去做出对应的修改
::v-deep {
.el-pagination {
width: 100%;
text-align: right;
.el-pagination__sizes {
float: left;
}
.el-pagination__total {
float: left;
}
}
}
先把所有的都往右排,然后把两个要往左边的,给它两左浮动属性,就ok啦,效果如下图
image.png
果然,又不小心犯了常识性错误,唉....
image.png
记录小细节,每天进步一点点
