按钮位置问题 (CSS)-PHP中文网问答

我正在尝试设计一个棋盘，但我遇到一个问题，White_Pawn7 出现在“下一行”，我不知道为什么。

我使用图像来显示棋子，并制作了一个具有棋盘背景的 div。 ID 的设计是为了更好地导航这个按钮应该去的地方。我尝试复制前 6 个 pawn，但 White_Pawn7 转到下一行。

使用的图片：

典当：典当

马：马

短跑运动员：短跑运动员

王：王

女王：女王

塔/车：车

董事会：董事会

我尝试使用：top: 9px;，它保持在同一行，但我对 White_Pawn7 的期望如下：

top: -9px;
left: -78px;

我为我想要的最终结果制作了一张图片：

最终结果

如何使行的 top 值完全相同？

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

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

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

#Background_Board { display:flex; flex-direction: column; } .row { display:flex; align-items:center; justify-content: center; } img { width: 45px; height: 45px; vertical-align: middle; position: relative; }

<!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" /> <link rel="stylesheet" href="White.css" /> <link rel="stylesheet" href="Generell.css" /> <title>Chess Game</title> </head> <body> <div id="Background_Board"> <div class="row"> <button id="White_Turm"> <img src="Pieces/White/White%20Turm.png" /> </button> <button id="White_Horse"> <img src="Pieces/White/White%20Horse.png" /> </button> <button id="White_Sprinter"> <img src="Pieces/White/White%20Sprinter.png" /> </button> <button id="White_Queen"> <img src="Pieces/White/White%20Queen.png" /> </button> <button id="White_King"> <img src="Pieces/White/White%20King.png"/> </button> <button id="White_Sprinter2"> <img src="Pieces/White/White%20Sprinter.png" /> </button> <button id="White_Horse2"> <img src="Pieces/White/White%20Horse.png" /> </button> <button id="White_Turm2"> <img src="Pieces/White/White%20Turm.png" /> </button> </div> <div class="row"> <button id="White_Pawn1"> <img src="Pieces/White/Bauer%20Weiß.png" /> </button> <button id="White_Pawn2"> <img src="Pieces/White/Bauer%20Weiß.png" /> </button> <button id="White_Pawn3"> <img src="Pieces/White/Bauer%20Weiß.png" /> </button> <button id="White_Pawn4"> <img src="Pieces/White/Bauer%20Weiß.png" /> </button> <button id="White_Pawn5"> <img src="Pieces/White/Bauer%20Weiß.png" /> </button> <button id="White_Pawn6"> <img src="Pieces/White/Bauer%20Weiß.png" /> </button> <button id="White_Pawn7"> <img src="Pieces/White/Bauer%20Weiß.png" /> </button> <button id="White_Pawn8"> <img src="Pieces/White/Bauer%20Weiß.png" /> </button> </div> </div> </body> </html>