перекрываются, когда я сворачиваю экран - PullRequest
1 голос
/ 02 апреля 2020

Когда я делаю размер экрана меньше, кнопка и опция выбора перекрываются согласно фрагменту. Между кнопкой и опцией выбора должен быть промежуток в дюймах (этот вывод поступает, когда экран развернут в максимальном размере). Может ли кто-нибудь, пожалуйста, помогите в этом, если я добавлю что-нибудь еще для вывода. Размещение кода 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;
    }
    
    .sub
    {
        position: absolute;
        top:50%;
        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;
    }
    
    .subsub
    {
        position: absolute;
        top:60%;
        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;
    }
    
    
    #button
    {
        background: #a9a9a9;
        color: #fff;
        position: absolute;
        height:30px;
        width:84px;
        left:63%;
        top:70%;
        border: none;
        color: arial;
        font-size: 16px;
    
    }
    #button:hover
    {
        background: red;
        cursor: pointer;
    }
<body style="background-image: url(./img/bkgrnd.png);background-size: cover;">
    <h3>welcome user!!</h3>
    <button class="ssystem">System</button>
    <button class="sub">Sub-System</button>
    <button class="subsub">Sub-Sub-System</button>
    <div class="box" id="sys">
        <select>
            <option>AAA</option>
            <option>BBB</option>
            <option>CCC</option>
        </select>
    </div>
    <div class="box1" id="sub">
        <select>
            <option>AAA</option>
            <option>BBB</option>
            <option>CCC</option>
        </select>
    </div>
    <div class="box2" id="sub1">
        <select>
            <option>AAA</option>
            <option>BBB</option>
            <option>CCC</option>
        </select>
</div>
<input type="submit" value="Submit" id="button">
</body>

1 Ответ

1 голос
/ 02 апреля 2020

Прямо сейчас ни одна кнопка не находится вместе с полем выбора, и каждый элемент позиционируется индивидуально независимо друг от друга. Элементами-братьями в этом случае являются каждая кнопка и элементы div, в которых вы найдете поля выбора.

Вы можете поместить правую кнопку вместе с правым полем выбора, это означает, что вы оберните их с помощью div и примените display: flex , поэтому они расположены рядом друг с другом. Для интервала вы можете добавить поля или отступы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...