当我最小化屏幕时重叠

Question

当我缩小屏幕尺寸时，按钮和选择选项就会根据片段重叠。在按钮和选择选项之间应该有一个英寸间隙（当屏幕最大化时会出现此输出）。有人可以帮忙吗，我应该为输出添加其他内容吗？发布下面的 html 和 css 代码：

CSS：

 body {

        margin: 0;

        padding: 0;

        background: #262626;

    }

    

    h3

    {

        text-align: right;

        color: #C0C0C0;

        padding-top: 10px;

    }

    .box {

        position: absolute;

        top:40%;

        left: 60%;

        transform: translate(-50%, -50%);

    }

    

    .box1 {

        position: absolute;

        top: 50%;

        left: 60%;

        transform: translate(-50%, -50%);

    }

    

    .box2 {

        position: absolute;

        top: 60%;

        left: 60%;

        transform: translate(-50%, -50%);

    }

    

    .box select {

        background: #a9a9a9; 

        color: #fff;

        padding: 10px;

        width: 250px;

        height: 35px;

        border: none;

        font-size: 15px;

        box-shadow: 0 5px 25px rgba(0,0,0,.5);

        -webkit-appearance: border;

        outline: none;

    }

    

    .box1 select {

        background: #a9a9a9; 

        color: #fff;

        padding: 10px;

        width: 250px;

        height: 35px;

        border: none;

        font-size: 15px;

        box-shadow: 0 5px 25px rgba(0,0,0,.5);

        -webkit-appearance: border;

        outline: none;

    }

    

    .box2 select {

        background: #a9a9a9; 

        color: #fff;

        padding: 10px;

        width: 250px;

        height: 35px;

        border: none;

        font-size: 15px;

        box-shadow: 0 5px 25px rgba(0,0,0,.5);

        -webkit-appearance: border;

        outline: none;

    }

    

    .ssystem

    {

        position: absolute;

        top:40%;

        left: 41%;

        transform: translate(-50%, -50%);

        background: #a9a9a9; 

        color: #fff;

        padding: 10px;

        width: 250px;

        height: 35px;

        border: none;

        font-size: 15px;

        box-shadow: 0 5px 25px rgba(0,0,0,.5);

        -webkit-appearance: border;

        outline: none;

    }

    

Answer 1

现在没有按钮与选择字段一起使用，并且每个元素都独立于其他同级元素单独定位。在这种情况下，同级元素是每个按钮和您在其中找到选择字段的 div。您可以将右侧按钮与右侧选择字段放在一起，这意味着您可以用 div 包裹它们并应用display: flex，以便它们彼此相邻。对于间距，您可以添加边距或填充。