提交按钮未显示在不同屏幕的同一区域
Posted
技术标签:
【中文标题】提交按钮未显示在不同屏幕的同一区域【英文标题】：Submit button not showing up in the same area on different screens 【发布时间】：2020-10-12 21:54:55 【问题描述】：当我在不同的屏幕上查看它时，我的提交按钮显示在非常不同的位置。我了解媒体查询的使用对此有所帮助，但我只是希望这些项目通常显示在同一区域。
我已尝试对我的尺寸使用百分比，但问题仍然存在。有什么推荐吗？过去我对百分比很幸运，我不确定为什么他们不能为我解决这个特定问题。还有什么问题吗？
这是我的代码（提交按钮的样式在样式表的底部）：
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>【问题讨论】：
您希望它在哪里？在“复习这门课...”框中？如果是这样，你想要在那个盒子里的什么地方？向左、向右、中间？ 【参考方案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;
【讨论】：
很高兴它帮助了你:)以上是关于提交按钮未显示在不同屏幕的同一区域的主要内容，如果未能解决你的问题，请参考以下文章
按“提交”按钮后“此页面无法正常工作 10.110.15.17 未发送任何数据”