提交按钮未显示在不同屏幕的同一区域

Question

当我在不同的屏幕上查看时，我的提交按钮显示在非常不同的地方。我知道媒体查询的使用对此有帮助，但我只是希望这些项目通常显示在同一区域。

我试过使用百分比作为尺寸，但问题仍然存在。有什么推荐吗？过去我对百分比很幸运，我不确定为什么他们不能为我解决这个特定问题。还有什么问题吗？

这是我的代码（提交按钮的样式在样式 sheet 的底部）：

html {
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
    background: #f1f2f6;
}

body {
    background: #f1f2f6;
    margin: 0;
    padding: 0;
}

.Class-Name-Bar {
    position: relative;
    height: 270px;
    width: 75%;
    background-color: #ffffff;
    margin: auto;
    margin-top: 35px;
    border-radius: 5px;
}

.Class-Name {
    position: absolute;
    height: 220px;
    background-image: linear-gradient(to bottom, rgba(10, 10, 25, .85), rgba(0, 0, 0, 0.85)), url(https://miro.medium.com/max/2656/1*d0Qd8OUx_TUxG7N6H991ew.jpeg);
    width: 100%;
    border-radius: 5px 5px 0 0;
}

    .Class-Name h1 {
        text-align: center;
        font-size: 60px;
        margin-top: 50px;
        font-weight: 200;
        color: #ffffff;
    }

    .Class-Name p {
        text-align: center;
        font-size: 20px;
        color: #f1f2f6;
        margin: -20px;
    }

#navigation {
    position: absolute;
}

div#navigation ul li {
    display: inline-block;
    margin-top: 86%;
    margin-left: 25px;
    color: #333333;
    font-size: 20px;
    list-style: none;
}

    div#navigation ul li a {
        text-decoration: none;
        color: #000000;
    }

        div#navigation ul li a:hover {
            text-decoration: none;
            color: #ff4757;
        }

.post-area-wrapper {
    position: relative;
    height: 120px;
    background-color: #ffffff;
    margin: 20px;
    width: 35%;
    margin-left: 52.5%;
    border-radius: 5px;
}

.post-area {
    position: relative;
    width: 95%;
    margin: 2%;

}

input[type=post] {
    padding: 3%;
    width: 95%;
    border: none;
    font-size: 18px;
    background-color: #f1f2f6;
    margin-top: 3%;
}

.submit {
    position: absolute;
    border: none;
    margin-left: 83%;
    padding: 5px 16px;
    border-radius: 25px;
    background-color: #D3D3D3;
}

<html>
<head>
    <link href="~/css/ClassReview.css" rel="stylesheet">
</head>
<body>
  

    <div class="Class-Name-Bar">
        <div class="Class-Name">
            <h1> Calculus</h1>
            <p> MA2500</p>
        </div>
        <div id="navigation">
            <ul>
                <li><a href="#">Notes</a></li>
                <li><a href="#">Tests</a></li>
                <li><a href="#">Quizlets</a></li>
            </ul>
        </div>
    </div>

    <div class="description">
    </div>

    <div class="post-area-wrapper">
        <form>
            <div class="post-area">
                <input type="post" name="post" placeholder="Review this class, tell us how you really feel..">
            </div>
            <button type=submit class="submit">Submit</button>
        </form>
    </div>
    
</body>

</html>

Answer 1

为了让你的提交按钮一直在同一个地方，你必须使用左上角右下角定义它的确切位置，或者使用下面的代码而不定义绝对位置你可以简单地定义它作为一个块，然后给它 margin-left:auto ，这会将它定位在 div 的右侧，并在右侧给它一个小的边距。

.submit {
    display:block;
    border: none;
    margin-right:10px;
    margin-left:auto;
    padding: 5px 16px;
    border-radius: 25px;
    background-color: #D3D3D3;
}

提交按钮未显示在不同屏幕的同一区域

Submit button not showing up in the same area on different screens

html

javascript

css

user-interface

view