style中float:right；没有置到最右或没有效果的解决方法！

最新推荐文章于 2024-03-07 18:08:53 发布

叶孤崖

最新推荐文章于 2024-03-07 18:08:53 发布

阅读量4k

点赞数 1

本文链接：https://blog.csdn.net/qq_34246965/article/details/108596277

版权

1.情况分析:

上传文件按钮float:left置右,F12看布局还发现右面有很多空格;

代码:

  <div style="margin: 6px 0 10px 0;">
        <!-- <div style="margin: 6px 0 10px 0;position: relative;"> -->
        <el-radio-group v-model="file_type" @change="file_type_change" size="medium">
            <el-radio-button label="1" >内部文件</el-radio-button>
            <!-- <el-radio-button style="float:right" label="2">外部文件</el-radio-button> -->
            <el-radio-button  label="2">外部文件</el-radio-button>
             <el-radio-button  label="3">外部文件EC</el-radio-button>
            </el-radio-group>
            <div style="display:inline-block;float: right; ">   
            <!-- <div style="display:inline-block;position:absolute;right:0px; ">    -->
                <el-button type="text" @click="uploadFile(false)">
                    <img class="img-icon" src="/images/upload.png">上传文件
                </el-button>       
            </div>
        </div>

显示:

在这里插入图片描述

要点1：在父级div 加 position: relative;

要点2：在子级div 加 position:absolute;right:0px;

此时即可看到 span标签所在的div （相当于）向右浮动显示显示（解决float:right;没有效果的问题）

更正代码:

<div style="margin: 6px 0 10px 0;position: relative;">
        <el-radio-group v-model="file_type" @change="file_type_change" size="medium">
            <el-radio-button label="1" >内部文件</el-radio-button>
            <!-- <el-radio-button style="float:right" label="2">外部文件</el-radio-button> -->
            <el-radio-button  label="2">外部文件</el-radio-button>
             <el-radio-button  label="3">外部文件EC</el-radio-button>
            </el-radio-group>
            <div style="display:inline-block;position:absolute;right:0px; ">   
                <el-button type="text" @click="uploadFile(false)">
                    <img class="img-icon" src="/images/upload.png">上传文件
                </el-button>       
            </div>
        </div>