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

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>

显示效果:

在这里插入图片描述


版权声明:本文为qq_34246965原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。