Html 缩放后，元素的位置将被另一个元素更改和隐藏

问题是，在缩放

.clinical\u form

元素后，它的位置发生了变化，并被

.clinical\u btn\u download

元素覆盖。是否有一种方法可以在每次放大或缩小后保持相同的结构而不重新定位

下面是我的css脚本

select{

margin-bottom: 1%;
margin-top: -3%;
margin-left: 16%;

}

.section_line{

margin-top: 2%;
margin-bottom: 2%;
border-bottom: 1% solid #DADADA;
border-radius: 3%;
background-color: #99CCFF;
width: 100%;

}

.clinical_form {


float: right;
margin-top: -8%;
margin-right: 30%;
margin-bottom: 2%;  


}
.clinical_time_tabHeader{

margin-top: 0.5%;
text-decoration: underline;
margin-bottom: 1%;
font-weight: bold;    
}

.upload_clinical  *{

display:inline; 

}
.cl_tb_btn_validate{    

 margin-right:10%;

}
.clinical_btn_download {

margin-top: 1%;
margin-bottom: 1%;
width:66.5%;

}
.cl_tb_btn_newdataset {


margin-bottom: 2%;
margin-top: 2%;

}

我的html块如下所示：

<div class = "tab" id="clinical_timebased_tab">     
<div class="clinical_time_tabHeader">Time based</div>

<button type="button" class="clinical_btn_download">Download form</button><br>

<div class="clinical_tb_set" id="clinical_tb_set_1">
    <div class="clinical_tb_set_header">Clinical Set 1</div>

    <div class="clinical_tb_treatment">
        <div class="clinical_tb_selectTreatm_header">Select Treatment</div>
        <select size="0" class="clinical_tb_selectTreatm">

        </select>
    </div>


    <div class="clinical_tb_parameter">
        <div class="clinical_tb_parameterSelect_header">Clinical parameter</div>
        <select size="0" class="clinical_tb_parameterSelect">

        </select>
    </div>

    <div class="clinical_tb_sample">
        <div class="clinical_tb_sample_header">Sample type</div>
        <select size="0" class ="clinical_tb_sampleSelect">

        </select>
    </div>

    <form class="clinical_form" enctype="form-data">

        <div class="upload_clinical_header">Upload clinical form</div> 
        <input type="file" class ="clinical_file" text="upload form..."           accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/> <br>
        <button class="remove_file" disabled="true">Remove</button> 
        <input type="button" class="cl_tb_btn_upload" value="Upload" disabled="true"/>
        <input type="button" class="cl_tb_btn_validate" value="Validate" disabled="true"/>            

    </form>

</div>

<button type="button" id="cl_tb_btn_newdataset">Add set</button>

<div id="dialog_popup" title=""></div>

</div>

基于时间的
下载表格

临床组1
选择治疗
临床参数
样本类型
上传临床表格


去除
添加集

问题在于，您使用页边距顶部：-8%和页边距右侧：30%来定位表单元素。这会将表单移出正常流程，尽管由于向右浮动，表单向右移动了一个空间，但实际内容会向左和向上移动，从而与其他内容发生冲突。一种解决方案是使表单向左浮动，div向左浮动，这样它们都在同一行上，对于较小的屏幕，它们将自动堆叠在彼此的顶部，如下所示：

form.clinical_form {
    float: left;
    margin-left: 10%;
    margin-bottom: 2%
}

div.clinical_tb_sample {
    float: left; 
}

这会破坏选择的对齐，因为包含的父项大小不同，因为最后一个父项不再是屏幕的填充宽度，因为浮动：left，所以我将其设置为常量，您可以更改它并使用它

select {
    margin-left:80px;
}