我为 HTML 页面编写了一个 CSS 文件，但它使我的页面变得困惑。停止按钮位于游戏框架后面。
1)我应该如何移动顶部的停止按钮以与开始按钮正确对齐。
2)底部箭头超出屏幕，我应该如何将其稍微向上移动以便它们能够正确显示？
3) 如何为“Points Earned”文本添加颜色并单击开始游戏？
HTML 代码:
<html>
<head>
<link rel="icon" href="./arrows/clubbackground.jpg" type="image/gif" sizes="16x16">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jsRev.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>DDR-Project 1</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="BackgroundScene">
<div id="DanceScoreboard">
<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="gameStarted=true;">Begin Game</button>
<br><br><br>
<div class="Status">Click Begin Game to start</div>
</div>
<div id="GameRunning"><button id="StopBtn" class="btnStyle" onclick="self.close()">Stop Game</button>
<div id="Status" class="Status"></div>
</div>
<div id="dancePoints" class="Points">Points Earned:
<div class="OutputText" id="CorrectCount">0</div>
</div>
</div>
<div class="stage"></div>
<!-- ENDS .STAGE -->
<div id="controls">
<img id="left" src="./arrows/staticLeft.png">
<img id="up" src="./arrows/staticUp.png">
<img id="down" src="./arrows/staticDown.png">
<img id="right" src="./arrows/staticRight.png">
</div>
<!-- ENDS #CONTROLS -->
</body>
</html>
CSS 文件:
.stage {
width: 1150px;
height: 500px;
margin:0;
padding:0;
background-image: url('./arrows/clubbackground.jpg');
background-repeat: no-repeat;
background-size: contain;
position: relative;
text-align: center;
opacity: 90%;
}
#controls {
padding-left: 350px;
}
/*#left {
}
#up {
}
#down {
}
#right {
}*/
.btnStyle {
border-radius: 4px;
border: medium solid #000000;
background-color:rgb(92, 250, 246);
font-family: "Arial", Impact, Charcoal, sans-serif;
font-weight: bold;
font-size:20px;
color: #ffffff;
padding: 5px 30px;
margin:8px 70px;
}
#StartBtn{
position: fixed;
left: 100px;
text-shadow: 2px 2px 4px black;
}
#StopBtn{
position: fixed;
left: 500px;
down: 10px;
border-radius: 4px;
border: medium solid #000000;
background-color:rgb(92, 250, 246);
font-family: "Arial", Impact, Charcoal, sans-serif;
font-weight: bold;
font-size:20px;
color: #ffffff;
text-shadow: 2px 2px 4px black;
padding: 5px 30px;
margin:8px 70px;
}
最佳答案
您可以使用表格来控制 HTML 元素中的位置。这可能不是最有效的方法，但它对初学者友好。
<html>
<head>
<link rel="icon" href="./arrows/clubbackground.jpg" type="image/gif" sizes="16x16">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jsRev.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>DDR-Project 1</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="BackgroundScene">
<div id="DanceScoreboard">
**<table>
<tr>
<td>
<div id="GameStopped"><button id="StartBtn" class="btnStyle"
onclick="gameStarted=true;">Begin Game</button>
</td>
<td>
<div id="GameRunning"><button id="StopBtn" class="btnStyle"
onclick="self.close()">Stop Game</button>
</td>
</tr>
</table>**
<br><br><br>
<div class="Status">Click Begin Game to start</div>
</div>
<div id="GameRunning"><button id="StopBtn" class="btnStyle" onclick="self.close()">Stop Game</button>
<div id="Status" class="Status"></div>
</div>
<div id="dancePoints" class="Points">Points Earned:
<div class="OutputText" id="CorrectCount">0</div>
</div>
</div>
<div class="stage"></div>
<!-- ENDS .STAGE -->
<div id="controls">
<img id="left" src="./arrows/staticLeft.png">
<img id="up" src="./arrows/staticUp.png">
<img id="down" src="./arrows/staticDown.png">
<img id="right" src="./arrows/staticRight.png">
</div>
<!-- ENDS #CONTROLS -->
</body>
</html>
由于我目前无法访问工作环境，因此无法测试它，但它应该可以正常工作。 我建议您还阅读标签可以接受的所有值，因为有一些非常适合显示目的。
顺便说一句，一般提示:始终使用百分比而不是像素指定宽度和高度，因为屏幕与屏幕之间的像素有所不同。
希望我有所帮助:)。
关于html - 更改 HTML 和 CSS 中的按钮位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60585366/