0


【Vue+Element UI】将按钮固定在页面的某一位置,且浏览器窗口大小发生变化时仍能显示

【Vue+Element UI】将按钮固定在页面的某一位置,且浏览器窗口大小发生变化时仍能显示

模板:vue-admin-template v4.4.0

问题描述:未对按钮的样式进行规定之前,会默认将按钮放在在页面的左上角。实际中需要让按钮独占一整行,并恒处于页面的右侧(当浏览器窗口尺寸变化后也能保持相对位置)。

效果展示

  • 全尺寸浏览器image-20220205150617620
  • 尺寸变化后的浏览器c171ad55f58b91add4cf6d0360e3256

实现代码

<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:在容器中中对弹性项目的位置进行设置,可以设置centerflex-startflex-end等值,分别规定项目位于容器的位置。
  • position: relative:可以设置absoluterelative等值,设置元素为绝对定位或相对定位。
  • 在btn1中设置righttop,设置项目据顶部和右边的距离。
标签: vue.js ui 前端

本文转载自: https://blog.csdn.net/hhhhh601/article/details/122790702
版权归原作者 yijia7590jfz 所有, 如有侵权,请联系我们删除。

“【Vue+Element UI】将按钮固定在页面的某一位置,且浏览器窗口大小发生变化时仍能显示”的评论:

还没有评论