这是我的html代码的一部分。问题是我的计时器ID为timerel的计时器和html表单未正确显示。我的页脚有一个相对显示,并具有宽度和顶部设置。当我更改它们时,将显示部分计时器。有人可以帮我解决这个问题吗?
* {
padding: 0;
margin: 0;
}
#canvas {
background: #99afa3;
display: block;
width: 700px;
height: 500px;
float: left;
margin: 0 auto;
}
#c {
background: #eeeeee;
display: block;
margin: 0 auto;
}
#timerel {
background: #eeeeee;
display: block;
margin: 0 auto;
}
<header>
<nav>
<!--<img alt="logo" src ="images/logo.png" style="float: left"/>-->
<a href="profile.php"><i></i>Profile</a>
<a href="info.php">Info</a>
<a href="ranking.php">Ranking</a>
<a href="index.php">Home</a>
</nav>
</header>
<aside style="background-color:#E0F9A1; float:right; width:300px; height:550px">
<p style="font-size:20px"> Poor Snoopy is sad. Help him to get out of the maze by giving commands. </p>
<img src="GameImg1.jpg" alt="GameImage" />
</aside>
<section>
<div id="c" style="margin-left:auto; margin-right:auto;margin-bottom: 10px;text-align: center;width: 10%;font-size: large"></div>
<canvas id="canvas" width="700" height="560">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<div id="timerel" style="text-align: center;width: 15%;font-size: large"></div>
<!--not display text before timer-->
<form>
<!--move box and num box not displayed-->
<input type="text" id="move" />
<input type="text" id="num" />
<button onclick="test();"> click me </button>
<p id="dem"></p>
</form>
<footer style="position: relative; top:570px; width:550px;">
<div class="footer-icons">
<ul>
<li><a href="#facebook"><i class="fa fa-facebook"> </i></a></li>
<li><a href="#twitter"><i class="fa fa-twitter"> </i></a></li>
<li><a href="#google"><i class="fa fa-google"> </i></a></li>
<li><a href="#youtube"><i class="fa fa-youtube"> </i></a></li>
</ul>
</div>
<p style="text-align: center; font-size: 24px; font-family: calibri"> Contact us on SnoopyMazeGame@gmail.com </p>
</footer>