在HTML中的图像上的按钮

问题描述 投票：-1回答：1

我正在研究这个代码，并且可以使用复杂的代码将按钮放在我想要的位置，但我只是想让它变得更简单。我现在可以将按钮放在图像上并改变其边缘顶部位置，但我无法改变其边距左侧位置。我想要这个星球的每个按钮，但正如我所说，我不能用简单的代码将它放置在行星的位置。 关于问题在哪里的任何想法？

.upfront {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-left: 155px;
  margin-right: 23px;
}

.menu {}

.spaceBoard {
  position: relative;
}

.previews {
  left: 173px;
  position: releative;
}

.button {
  position: absolute;
  margin-left: 215;
  margin-top: 315px;
  z-index: 2;
  border-radius: 50%;
  border: none;
}
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Başlıksız Belge</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body background="https://i.hizliresim.com/DyZ49m.png">
  <script>
    function bgClicked() {
      var id = document.getElementById("bgClicked");
      id.style.visibility = "visible";
      document.getElementById("bgMAIN").style.display = "none";
    }
  </script>
  <center>
    <div class="upper"><img src="https://i.hizliresim.com/vJ9n5m.png" width="75%" height="75%" /></div>
    <!--//<div><img src="Pics/2_.png" style="right:9px; top:12 position:relative;" /></div>-->
    <div class="spaceBoard">
      <input type="button" class="button" />
      <img src="https://i.hizliresim.com/Eyo5pB.png" id="bgMAIN" onclick="bgClicked()">
      <img src="https://i.hizliresim.com/mJB15Z.png" style="visibility:hidden;" class="previews;" id="bgClicked;">
    </div>
  </center>
</body>

</html>
javascript html css html5 image
1个回答
0
投票

你在下面的边缘错过了px，现在它就像你想要的那样移动

.upfront{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-left: 155px;
	margin-right: 23px;
}
.menu{
	
}
.spaceBoard{
	position:relative;
	
	
}
.previews{
	left:173px;
	position:releative;

}
.button{
	position:absolute;
	margin-left:215px;
	margin-top:315px;
	z-index:2;
	border-radius:50%;
	border:none;	
}











s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body background="https://i.hizliresim.com/DyZ49m.png">
<script>
	function bgClicked(){
		var id = document.getElementById("bgClicked");
		id.style.visibility="visible";
		document.getElementById("bgMAIN").style.display="none";
	}
	
</script>
	<center>
		<div class="upper"><img src="https://i.hizliresim.com/vJ9n5m.png" width="75%" height="75%"/></div>
        <!--//<div><img src="Pics/2_.png" style="right:9px; top:12 position:relative;" /></div>-->
         <div class="spaceBoard">
        <input type="button" class="button" />
    	<img src="https://i.hizliresim.com/Eyo5pB.png" id="bgMAIN"  onclick="bgClicked()">
        
		<img src="https://i.hizliresim.com/mJB15Z.png" style="visibility:hidden;"class="previews;" id="bgClicked;">
        
        </div>
        
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.