【Vue+Element UI】将按钮固定在页面的某一位置,且浏览器窗口大小发生变化时仍能显示
模板:vue-admin-template v4.4.0
问题描述:未对按钮的样式进行规定之前,会默认将按钮放在在页面的左上角。实际中需要让按钮独占一整行,并恒处于页面的右侧(当浏览器窗口尺寸变化后也能保持相对位置)。
效果展示:
-
全尺寸浏览器
-
尺寸变化后的浏览器
实现代码:
<div class="d2">
<el-button
class="btn1"
type="primary" size="small" icon="el-icon-refresh-right"
@click="getLiveList()">手动刷新</el-button>
</div>
<style>
.d2 {
min-width: 100%;
height: 40px;
position: relative;
display:flex;
justify-content:flex-end;
}
.btn1 {
position: relative;
right: 10px;
top: 10px;
}
</style>
注解:
-
div作为容器,可以独占一行,但在实际测试中需要设置其宽度。原本设定的宽度为
width: 1200px
为固定值,不具有迁移性。设置min-width为100%可以定义块级对象的百分比最小宽度。[CSS: min-width属性](CSS min-width 属性 (w3school.com.cn)) -
justify-content: flex-end:在容器中中对弹性项目的位置进行设置,可以设置
center
、flex-start
、flex-end
等值,分别规定项目位于容器的位置。 -
position: relative:可以设置
absolute
、relative
等值,设置元素为绝对定位或相对定位。 -
在btn1中设置
right
、top
,设置项目据顶部和右边的距离。