爲什麼我不能移動按鈕？

-2

我想爲一個掃雷網頁遊戲的東西做基本的HTML5/CSS3框架。但由於某種原因，我無法讓我的按鈕移出靜態位置。我做錯了什麼？這裏是我的代碼（注：我使用NetBeans 8.1 IDE）爲什麼我不能移動按鈕？

HTML：

<!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>

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%; 
} 

#8x8 { 
left: 500px; 
} 

#10x10 { 
left:1000px; 
} 

.grid-box {}

來源

2015-12-12 Null Spark

你的問題是什麼？ –

我的問題是'爲什麼不能讓按鈕移出靜態位置？' –

不能移動的按鈕，因爲div編號是數字。他們應該至少有一個字符。我改變了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 {}

這裏有一個fiddle與解決方案。欲瞭解更多信息，read this。

來源

2015-12-12 04:56:06

非常感謝 –

爲什麼我不能移動按鈕？

回答

相關問題