移动设备上的按钮没有水平对齐

Question

我有两个按钮，它们在桌面上完美地水平对齐，但在移动设备上却不行。如果重要的话，我也在使用 MaterializeCSS。

相关代码如下：

html {
    --global-color: white;
    --global-color-invert: black;
    --background-color: white;
    --not-current-screen: lightgray;
    --current-screen: black;
    --padding-of-side: 0%;
    --padding-bottom: 5%;
    --margin-left: 15%;
    --margin-right: 15%;
    --padding-left: 0%;
    --padding-right: 0%;
}

html[data-theme="dark"] {
    --global-color: black;
    --global-color-invert: white;
    --background-color: #1A1B1C;
    --not-current-screen: #787878;
    --current-screen: white;
}

@media screen and (min-device-width: 0px) and (max-device-width: 600px) {
    html {
        --padding-of-side: 20%;
        --padding-bottom: 3%;
        --margin-left: 2%;
        --margin-right: 2%;
        --padding-left: 1%;
        --padding-right: 1%;
    }
    
}

.not_current_screen {
    color: var(--not-current-screen);
    border-left: 1.5px solid var(--not-current-screen);
    padding-left: var(--padding-of-side);
    margin-top: 2px;
}

.current_screen {
    color: var(--current-screen);
    border-left: 1.5px solid var(--current-screen);
    padding-left: var(--padding-of-side);
    margin-top: 2px;
}

body {
    background-color: var(--background-color);
    color: var(--global-color-invert)
}

label > span {
    color: var(--global-color-invert)
}

input[type="checkbox"] {
    border: 2px solid var(--global-color-invert) !important;
}

.padded_div {
    border: 1px solid var(--global-color-invert); 
    border-radius: 5px; 
    padding-top: 1%; 
    padding-bottom: var(--padding-bottom); 
    margin-left: var(--margin-left); 
    margin-right: var(--margin-right); 
    padding-left: var(--padding-left);
    padding-right: var(--padding-right);
    text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div id="appMain" class="padded_div">
    <h5>Please Agree to These Terms and Conditions:</h5>
    <div class="row">
        <div class="col s2">
            <div>
                <ul>
                    <li class="current_screen">Terms and Conditions</li>
                    <li class="not_current_screen">Patient Info</li>
                    <li class="not_current_screen">Suggested Symptoms</li>
                    <li class="not_current_screen">Symptoms</li>
                    <li class="not_current_screen">Diseases</li>
                </ul>
            </div>
        </div>
        <div class="col s8">
            <br>
            <ul style="text-align: center; list-style-position: inside;" class="browser-default">
                <li>This is not a replacement for doctors.</li>
                <li>This app may not be completely accurate.</li>
                <li>Do not use this to actually check symptoms for patients.</li>
                <li>This is a demo, we are non-liable.</li>
            </ul>
            <br>
            <br>
            <label style="text-align: center;">
                <input type="checkbox" class="filled-in" />
                <span>I understand</span>
            </label>
        </div>
    </div>
    <br>
    <button style="margin-right: 33%" id="back" class="waves-effect waves-light btn">Back</button>
    <button style="margin-left: 33%" id="next" class="waves-effect waves-light btn disabled" onclick="moveToPage(2)">Next</button>
    <script>
        var checkbox = document.querySelector("input[type=checkbox]");

        checkbox.addEventListener('change', function() {
            if (this.checked) document.getElementById("next").classList.remove("disabled");
            else document.getElementById("next").classList.add("disabled");
        });
    </script>
    </div>

图像在移动设备上显示损坏：

如果您想要网站 url，请在此处：https://healthhacks2021.herokuapp.com/

Answer 1

移动断点去掉左键的margin-right:33%和右键的margin-left:33%，它们会并排。

Answer 2

将按钮放入 SPAN，移除边距（我认为这是问题所在）然后封装在 DIV 中，然后为其设置 flex，就像这样：

<div class="mybuttons">
    <span><button id="back" class="waves-effect waves-light btn">Back</button></span>
    <span><button id="next" class="waves-effect waves-light btn disabled" onclick="moveToPage(2)">Next</button></span>
</div>

并且在 CSS 文件中：

.mybuttons {
    display: flex;
    justify-content: space-between;
    text-align: left;
}

.mybuttons:last-child {
    text-align: right;
}

您的按钮将在不使用边距的情况下显示为对齐。也许不优雅......但会做。

移动设备上的按钮没有水平对齐

Buttons not Horizontally Aligning for Mobile

html

css

responsive