Question

我希望这里的所有按钮看起来都一样大小，并且都对齐。我认为W是给我麻烦的那个，但我不知道如何解决。尝试特别针对W，但是我的按钮规格将其覆盖。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Drump pad</title>
    <link rel="stylesheet" type="text/css" href="drumpad.css">
</head>
<body>
    <div id="drum-machine">
        <div id="display">
            <p id="displaytext"></p>
        </div>
            <div id="controls1">
            <button id="Heater1button"  class="drum-pad"><audio class="clip" id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" preload="auto"></audio>Q</button>
            <button id="Heater2button" class="drum-pad"><audio class="clip" id='W' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" preload="auto"></audio>W</button>
            <button id="Heater3button" class="drum-pad"><audio class="clip" id='E' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" preload="auto"></audio>E</button>
            </div>
        <div id="controls2">
            <button id="Heater4button" class="drum-pad"><audio class="clip" id='A' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" preload="auto"></audio>A</button>
            <button id="Heater6button"  class="drum-pad"><audio class="clip" id='S'src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"></audio>S</button>
            <button id="OpenHHbutton"  class="drum-pad"><audio class="clip" id='D'src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"></audio>D</button>
        </div>
        <div id="controls3">
            <button id="KicknHat" class="drum-pad"><audio class="clip" id='Z'src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"></audio>Z</button>
            <button id="Kickbutton"class="drum-pad"><audio class="clip" id='X'src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"></audio>X</button>
            <button id="ClosedHHbutton"class="drum-pad"><audio class="clip" id='C' src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"></audio>C</button>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

</body>
</html>

CSS

#controls1{
  display:flex;
  margin-left:50px;
  margin-top:100px;
  justify-content:center;
}

#controls2{
  display:flex;
  margin-left:50px;
  justify-content:center;
}



#controls3{
  display:flex;
  margin-left:50px;
  justify-content:center;
  margin-left:50px;

}


button{ background:#a0a0e0;
  border:1px solid #666; 
  border-radius:2px; 
  padding:10px;
  margin-right:20px;
  margin-top:20px;


};

https://codepen.io/HernanF/pen/gBqRVa

Answer 1

您可以设置按钮的大小，而不是填充的大小：

button {
  background: #a0a0e0;
  border: 1px solid #666;
  border-radius: 2px;
  margin-right: 20px;
  margin-top: 20px;
  padding:0;
  width:2em;
  height:3em;
  text-align:center;
}

在有效代码段下面。

#controls1 {
  display: flex;
  margin-left: 50px;
  margin-top: 100px;
  justify-content: center;
}

#controls2 {
  display: flex;
  margin-left: 50px;
  justify-content: center;
}

#controls3 {
  display: flex;
  margin-left: 50px;
  justify-content: center;
  margin-left: 50px;
}

button {
  background: #a0a0e0;
  border: 1px solid #666;
  border-radius: 2px;
  margin-right: 20px;
  margin-top: 20px;
  padding:0;
  width:2em;
  height:3em;
  text-align:center;
}

<!DOCTYPE html>
<html>

<head>
  <title>Drump pad</title>
  <link rel="stylesheet" type="text/css" href="drumpad.css">
</head>

<body>
  <div id="drum-machine">
    <div id="display">
      <p id="displaytext"></p>
    </div>
    <div id="controls1">
      <button id="Heater1button" class="drum-pad"><audio class="clip" id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" preload="auto"></audio>Q</button>
      <button id="Heater2button" class="drum-pad"><audio class="clip" id='W' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" preload="auto"></audio>W</button>
      <button id="Heater3button" class="drum-pad"><audio class="clip" id='E' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" preload="auto"></audio>E</button>
    </div>
    <div id="controls2">
      <button id="Heater4button" class="drum-pad"><audio class="clip" id='A' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" preload="auto"></audio>A</button>
      <button id="Heater6button" class="drum-pad"><audio class="clip" id='S'src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"></audio>S</button>
      <button id="OpenHHbutton" class="drum-pad"><audio class="clip" id='D'src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"></audio>D</button>
    </div>
    <div id="controls3">
      <button id="KicknHat" class="drum-pad"><audio class="clip" id='Z'src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"></audio>Z</button>
      <button id="Kickbutton" class="drum-pad"><audio class="clip" id='X'src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"></audio>X</button>
      <button id="ClosedHHbutton" class="drum-pad"><audio class="clip" id='C' src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"></audio>C</button>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

</body>

</html>

使按钮大小相同

1 个答案: