如何让el-pagination再div中靠右
时间: 2024-04-24 22:24:08 浏览: 138
要将 `el-pagination` 组件在 `div` 中靠右对齐,你可以使用 CSS 来设置样式。下面是一个示例代码:
```html
<template>
<div class="pagination-container">
<!-- 其他内容 -->
<el-pagination
class="pagination"
:total="total"
:current-page="currentPage"
:page-size="pageSize"
layout="prev, pager, next"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</template>
<style scoped>
.pagination-container {
display: flex;
justify-content: flex-end;
}
.pagination {
margin-left: auto;
}
</style>
```
在上述示例中,我们给包含 `el-pagination` 组件的 `div` 添加了一个类名 `pagination-container`,并设置了 `display: flex; justify-content: flex-end;` 的样式。这会将 `div` 的内容显示为弹性盒子,并将其中的内容靠右对齐。
然后,我们给 `el-pagination` 组件添加了一个类名 `pagination`,并设置了 `margin-left: auto;` 的样式。这会将 `el-pagination` 组件向右移动,使其靠右对齐。
通过这些样式设置,你可以实现将 `el-pagination` 组件在 `div` 中靠右对齐。你可以根据需要调整样式和布局来满足你的具体需求。
阅读全文