Button position issue (CSS)
P粉793532469
2023-09-03 10:45:19
<p>我正在尝试设计一个棋盘，但我遇到一个问题，<code>White_Pawn7</code> 出现在“下一行”，我不知道为什么。</p>
<p>我使用图像来显示棋子，并制作了一个具有棋盘背景的 div。 ID 的设计是为了更好地导航这个按钮应该去的地方。我尝试复制前 6 个 pawn，但 <code>White_Pawn7</code> 转到下一行。</p>
<p>使用的图片：</p>
<p>典当：典当</p>
<p>马：马</p>
<p>短跑运动员：短跑运动员</p>
<p>王：王</p>
<p>女王：女王</p>
<p>塔/车：车</p>
<p>董事会：董事会</p>
<p>我尝试使用：<code>top: 9px;</code>，它保持在同一行，但我对 <code>White_Pawn7</code> 的期望如下：</p>
<pre class="brush:php;toolbar:false;">top: -9px;
left: -78px;</pre>
<p>我为我想要的最终结果制作了一张图片：</p>
<p>最终结果</p>
<p>如何使行的 <code>top</code> 值完全相同？</p>
<p>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#White_Queen{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -0px;
left: -12px;
}
#White_Sprinter{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -6px;
left: -8px;
}
#White_Sprinter2{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -6px;
left: -20px;
}
#White_King{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -4px;
left: -16px;
}
#White_Horse{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -6px;
left: -4px;
}
#White_Horse2{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -6px;
left: -24px;
}
#White_Turm{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -4px;
left: -0px;
}
#White_Turm2{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -60px;
left: 350px;
}
#White_Pawn1{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -9px;
left: -54px;
}
#White_Pawn2{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -9px;
left: -58px;
}
#White_Pawn3{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -9px;
left: -62px;
}
#White_Pawn4{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -9px;
left: -66px;
}
#White_Pawn5{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -9px;
left: -70px;
}
#White_Pawn6{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -9px;
left: -74px;
}
#White_Pawn7{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -59px;
left: 300px;
}
#White_Pawn8{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -59px;
left: 296px;
}
#Background_Board{
background-image: url("Board\ as\ Background/Board.png");
background-size: cover;
border: 5px solid black;
}
div{
height: 400px;
width: 400px;
}
img{
width: 45px;
height: 45px;
position: relative;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chess Game</title>
</head>
<body>
<div id="Background_Board">
<button id="White_Turm">
<img
src="Pieces/White/White%20Turm.png"
alt="Turm"
style="width: 45px; height: 45px; top: -0px; left: -2px"
/>
</button>
<button id="White_Horse">
<img
src="Pieces/White/White%20Horse.png"
alt="Horse"
style="top: 2px; height: 40px; width: 40px"
/>
</button>
<button id="White_Sprinter">
<img
src="Pieces/White/White%20Sprinter.png"
alt="Sprinter"
style="width: 40px; height: 40px; top: 2px"
/>
</button>
<button id="White_Queen">
<img
src="Pieces/White/White%20Queen.png"
alt="Queen"
style="height: 50px; width: 50px; top: -1px"
/>
</button>
<button id="White_King">
<img src="Pieces/White/White%20King.png" alt="King" style="top: 0px" />
</button>
<button id="White_Sprinter2">
<img
src="Pieces/White/White%20Sprinter.png"
alt="Sprinter"
style="width: 40px; height: 40px; top: 2px"
/>
</button>
<button id="White_Horse2">
<img
src="Pieces/White/White%20Horse.png"
alt="Horse"
style="top: 2px; height: 40px; width: 40px"
/>
</button>
<button id="White_Turm2">
<img
src="Pieces/White/White%20Turm.png"
alt="Turm"
style="top: 6px; height: 45px; width: 45px"
/>
</button>
<button id="White_Pawn1">
<img
src="Pieces/White/Bauer%20Weiß.png"
alt="White Pawn Number 1"
style="width: 40px; height: 40px; top: 3px"
/>
</button>
<button id="White_Pawn2">
<img
src="Pieces/White/Bauer%20Weiß.png"
alt="White Pawn Number 2"
style="width: 40px; height: 40px; top: 3px"
/>
</button>
<button id="White_Pawn3">
<img
src="Pieces/White/Bauer%20Weiß.png"
alt="White Pawn Number 3"
style="width: 40px; height: 40px; top: 3px"
/>
</button>
<button id="White_Pawn4">
<img
src="Pieces/White/Bauer%20Weiß.png"
alt="White Pawn Number 4"
style="width: 40px; height: 40px; top: 3px"
/>
</button>
<button id="White_Pawn5">
<img
src="Pieces/White/Bauer%20Weiß.png"
alt="White Pawn Number 5"
style="width: 40px; height: 40px; top: 3px"
/>
</button>
<button id="White_Pawn6">
<img
src="Pieces/White/Bauer%20Weiß.png"
alt="White Pawn Number 6"
style="width: 40px; height: 40px; top: 3px"
/>
</button>
<button id="White_Pawn7">
<img
src="Pieces/White/Bauer%20Weiß.png"
alt="White Pawn Number 7"
style="width: 40px; height: 40px; top: 3px"
/>
</button>
<button id="White_Pawn8">
<img
src="Pieces/White/Bauer%20Weiß.png"
alt="White Pawn Number 8"
style="width: 40px; height: 40px; top: 3px"
/>
</button>
</div>
</body>
</html></code></pre>
</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You just need to change top to:
#White_Turm2{ width: 50px; height: 50px; padding: 0px; background: none; border: none; position: relative; top: -100px; left: 350px; } #White_Pawn7{ width: 50px; height: 50px; padding: 0px; background: none; border: none; position: relative; top: -100px; left: 300px; } #White_Pawn8{ width: 50px; height: 50px; padding: 0px; background: none; border: none; position: relative; top: -100px; left: 296px; }But I recommend you to use display:flex; attribute, it's easier and you don't need to write that much code.