我正在尝试为Minesweeper Web Game制作基本的HTML5 / CSS3框架。但由于某种原因，我不能让我的按钮移出他们的静态位置。我做错了什么？这是我的代码（注意：我使用的是NetBeans 8.1 IDE）
HTML：
<a href="cafe.html">的CSS： `
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Minesweeper Web App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="http://old.no/icon/entertainment/mini-mine.gif" />
<link rel="stylesheet" href="classes.css" type="text/css"/>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
</head>
<body>
<div class="header">
<h1>Minesweeper!!!!</h1>
<p>Made by Desmond</p>
</div>
<div class="sub-header">
<div class="img-box" id="left">
<img src="#" id="smile" alt="this game is broken!"/>
</div>
<div class="img-box" id="right">
<img src="#" id="flag" alt="This game is broken!"/>
</div>
<p id="score">Score: </p>
</div>
<div class="body">
<div class="grid-box">
<div class="button" id="5x5">
<p>Easy (5x5)</p>
</div>
<div class="button" id="8x8">
<p>Medium (8x8)</p>
</div>
<div class="button" id="10x10">
<p>Hard (10x10)</p>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
您无法移动按钮，因为div ID是数字。他们至少应该有一个角色。我改变了id，现在它正在工作。 的 HTML
<div class="header">
<h1>Minesweeper!!!!</h1>
<p>Made by Desmond</p>
</div>
<div class="sub-header">
<div class="img-box" id="left">
<img src="#" id="smile" alt="this game is broken!" />
</div>
<div class="img-box" id="right">
<img src="#" id="flag" alt="This game is broken!" />
</div>
<p id="score">Score: </p>
</div>
<div class="body">
<div class="grid-box">
<div class="button" id="5x5">
<p>Easy (5x5)</p>
</div>
<div class="button" id="eight">
<p>Medium (8x8)</p>
</div>
<div class="button" id="ten">
<p>Hard (10x10)</p>
</div>
</div>
</div>
<强> CSS：
.header {
width: 100%;
height: 20%;
border-bottom: 2px solid #efefef;
border-radius: 5px;
background: #80ffff;
text-align: center;
font-family: "Comic Sans MS", cursive;
}
.sub-header {
width: 100%;
height: 10%;
border-bottom: 2px solid #efefef;
border-radius: 5px;
background: #e5ffff;
}
.img-box {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
background: radial-gradient(#cccccc 20%, #999999 80%);
border: 2px solid #cccccc;
border-radius: 2px;
align-content: center
}
.img-box img {
vertical-align: middle;
}
.button {
position: relative;
background-color: #efefef;
height: 30px;
width: 100px;
border: 2px #999999 solid;
border-radius: 8px;
font-family: "Modern No. 20";
font-weight: bold;
margin-left: 100px;
}
.button p {
position: absolute;
top: -8px;
}
.header p {
text-shadow: 2px 2px gray;
right: 1px;
}
.sub-header {
text-align: center;
margin-top: 0px;
}
.body {
background: #d9d9d9;
height: 1000px;
width: 100%;
}
#eight {
left: 200px;
}
#ten {
left: 1000px;
}
.grid-box {}