缩放时如何将按钮保持在 div 内？

Question

想要在缩放 window 或移动视图时保持相同的按钮布局。由于某些原因，按钮不会留在 div 内，并在大约 1160px 的宽度后重新排列。

而且即使我使用 vw，字母也不会按比例缩放并且不再在按钮内居中。

希望有人能帮帮我，谢谢！

html, body {
  padding: 0;
  margin: 0;
  height: 100 % ;
}#
keyboard {
  position: absolute;
  width: 40 vw;
  right: 6 vw;
  top: 7 vw;

}#
zero {
  position: relative;
  left: 4.8 vw;
}

.btn {
  border - radius: 1.5 vw;
  font - size: 3 vw;
  width: 4.5 vw;
  background - color: rgb(26, 26, 26);
  border - color: rgb(51, 51, 51);
  border - width: 0.5 vw;
  color: rgb(255, 208, 0);
  text - align: center;
  font - family: "Microgramma";
  text - shadow: 0 0 0.5 vw# ff7b00;
  margin: 0.1 vw;
  margin - top: 0.2 vw;
  margin - bottom: 0.2 vw;


}
.btn2 {
  border - radius: 1.5 vw;
  font - size: 2 vw;
  min - width: 10 vw;
  background - color: rgb(26, 26, 26);
  border - color: rgb(51, 51, 51);
  border - width: 0.5 vw;
  color: rgb(255, 208, 0);
  font - family: "Microgramma";
  text - shadow: 0 0 0.5 vw# ff7b00;
  margin: 0.1 vw;
  position: relative;
  left: 3 vw;

}

<div id="keyboard">
  <div id="firstLine">
    <button type="button" class="btn" value="O" onclick="input_Run(this.value);playbtnsound()">O</button>
    <button type="button" class="btn" value="N" onclick="input_Run(this.value);playbtnsound()">N</button>
    <button type="button" class="btn" value="G" onclick="input_Run(this.value);playbtnsound()">G</button>
    <button type="button" class="btn" value="R" onclick="input_Run(this.value);playbtnsound()">R</button>
    <button type="button" class="btn" value="B" onclick="input_Run(this.value);playbtnsound()">B</button>
    <button type="button" class="btn" value="7" onclick="input_Run(this.value);playbtnsound()">7</button>
    <button type="button" class="btn" value="8" onclick="input_Run(this.value);playbtnsound()">8</button>
    <button type="button" class="btn" value="9" onclick="input_Run(this.value);playbtnsound()">9</button>
  </div>
  <div id="secondLine">
    <button type="button" class="btn" value="X" onclick="input_Run(this.value);playbtnsound()">X</button>
    <button type="button" class="btn" value="Z" onclick="input_Run(this.value);playbtnsound()">Z</button>
    <button type="button" class="btn" value="U" onclick="input_Run(this.value);playbtnsound()">U</button>
    <button type="button" class="btn" value="W" onclick="input_Run(this.value);playbtnsound()">W</button>
    <button type="button" class="btn" value="C" onclick="input_Run(this.value);playbtnsound()">C</button>
    <button type="button" class="btn" value="4" onclick="input_Run(this.value);playbtnsound()">4</button>
    <button type="button" class="btn" value="5" onclick="input_Run(this.value);playbtnsound()">5</button>
    <button type="button" class="btn" value="6" onclick="input_Run(this.value);playbtnsound()">6</button>
  </div>
  <div id="thirdLine">
    <button type="button" class="btn" value="I" onclick="input_Run(this.value);playbtnsound()">I</button>
    <button type="button" class="btn" value="K" onclick="input_Run(this.value);playbtnsound()">K</button>
    <button type="button" class="btn" value="E" onclick="input_Run(this.value);playbtnsound()">E</button>
    <button type="button" class="btn" value="F" onclick="input_Run(this.value);playbtnsound()">F</button>
    <button type="button" class="btn" value="Y" onclick="input_Run(this.value);playbtnsound()">Y</button>
    <button type="button" class="btn" value="1" onclick="input_Run(this.value);playbtnsound()">1</button>
    <button type="button" class="btn" value="2" onclick="input_Run(this.value);playbtnsound()">2</button>
    <button type="button" class="btn" value="3" onclick="input_Run(this.value);playbtnsound()">3</button>
  </div>
  <div id="fourthLine">
    <button type="button" class="btn" value="M" onclick="input_Run(this.value);playbtnsound()">M</button>
    <button type="button" class="btn" value="S" onclick="input_Run(this.value);playbtnsound()">S</button>
    <button type="button" class="btn" value="T" onclick="input_Run(this.value);playbtnsound()">T</button>
    <button type="button" class="btn" value="L" onclick="input_Run(this.value);playbtnsound()">L</button>
    <button type="button" class="btn" value="J" onclick="input_Run(this.value);playbtnsound()">J</button>
    <button type="button" class="btn" id="zero" value="0" onclick="input_Run(this.value);playbtnsound()">0</button>
  </div>
  <div id="fifthLine">
    <button type="button" class="btn" value="P" onclick="input_Run(this.value);playbtnsound()">P</button>
    <button type="button" class="btn" value="Q" onclick="input_Run(this.value);playbtnsound()">Q</button>
    <button type="button" class="btn" value="D" onclick="input_Run(this.value);playbtnsound()">D</button>
    <button type="button" class="btn" value="A" onclick="input_Run(this.value);playbtnsound()">A</button>
    <button type="button" class="btn" value="V" onclick="input_Run(this.value);playbtnsound()">V</button>
  </div>

  <div id="sixthLine">
    <button type="button" class="btn" value="H" onclick="input_Run(this.value);playbtnsound()">H</button>
    <button type="button" class="btn2" value=" " onclick="input_Run(this.value);playbtnsound()">SPACE</button>
    <button type="button" class="btn2" onclick="backspace();playbtnsound()">DELETE</button>
    <button type="button" class="btn2" onclick="clearit();playbtnsound()">CLEAR</button>
  </div>

Answer 1

使用HTML table代替div

html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}
#keyboard {
    position: absolute;
    width: 40vw;
    right: 6vw;
    top: 7vw;

}


.btn {
    border-radius: 1.5vw;
    font-size: 3vw;
    width: 4.5vw;
    background-color: rgb(26, 26, 26);
    border-color: rgb(51, 51, 51);
    border-width: 0.5vw;
    color: rgb(255, 208, 0);
    text-align: center;
    font-family: "Microgramma";
    text-shadow: 0 0 0.5vw #ff7b00;
    margin: 0.1vw 0.2vw;
        
}
.max-btn {
    min-width: 10vw;
    font-size: 2vw;
}

.btn-placeHolder{
   width: 4.5vw;
}

<table id="keyboard">
  <tr id="firstLine">
    <td><button type="button" class="btn" value="O" onclick="input_Run(this.value);playbtnsound()">O</button></td>
    <td><button type="button" class="btn" value="N" onclick="input_Run(this.value);playbtnsound()">N</button></td>
    <td><button type="button" class="btn" value="G" onclick="input_Run(this.value);playbtnsound()">G</button></td>
    <td><button type="button" class="btn" value="R" onclick="input_Run(this.value);playbtnsound()">R</button></td>
    <td><button type="button" class="btn" value="B" onclick="input_Run(this.value);playbtnsound()">B</button></td>
    <td><button type="button" class="btn" value="7" onclick="input_Run(this.value);playbtnsound()">7</button></td>
    <td><button type="button" class="btn" value="8" onclick="input_Run(this.value);playbtnsound()">8</button></td>
    <td><button type="button" class="btn" value="9" onclick="input_Run(this.value);playbtnsound()">9</button></td>
  </tr>
  <tr id="secondLine" >
    <td><button type="button" class="btn" value="X" onclick="input_Run(this.value);playbtnsound()">X</button></td>
    <td><button type="button" class="btn" value="Z" onclick="input_Run(this.value);playbtnsound()">Z</button></td>
    <td><button type="button" class="btn" value="U" onclick="input_Run(this.value);playbtnsound()">U</button></td>
    <td><button type="button" class="btn" value="W" onclick="input_Run(this.value);playbtnsound()">W</button></td>
    <td><button type="button" class="btn" value="C" onclick="input_Run(this.value);playbtnsound()">C</button></td>
    <td><button type="button" class="btn" value="4" onclick="input_Run(this.value);playbtnsound()">4</button></td>
    <td><button type="button" class="btn" value="5" onclick="input_Run(this.value);playbtnsound()">5</button></td>
    <td><button type="button" class="btn" value="6" onclick="input_Run(this.value);playbtnsound()">6</button></td>
  </tr>
  <tr id="thirdLine" >
    <td><button type="button" class="btn" value="I" onclick="input_Run(this.value);playbtnsound()">I</button></td>
    <td><button type="button" class="btn" value="K" onclick="input_Run(this.value);playbtnsound()">K</button></td>
    <td><button type="button" class="btn" value="E" onclick="input_Run(this.value);playbtnsound()">E</button></td>
    <td><button type="button" class="btn" value="F" onclick="input_Run(this.value);playbtnsound()">F</button></td>
    <td><button type="button" class="btn" value="Y" onclick="input_Run(this.value);playbtnsound()">Y</button></td>
    <td><button type="button" class="btn" value="1" onclick="input_Run(this.value);playbtnsound()">1</button></td>
    <td><button type="button" class="btn" value="2" onclick="input_Run(this.value);playbtnsound()">2</button></td>
    <td><button type="button" class="btn" value="3" onclick="input_Run(this.value);playbtnsound()">3</button></td>
  </tr>
  <tr id="fourthLine" >
    <td><button type="button" class="btn" value="M" onclick="input_Run(this.value);playbtnsound()">M</button></td>
    <td><button type="button" class="btn" value="S" onclick="input_Run(this.value);playbtnsound()">S</button></td>
    <td><button type="button" class="btn" value="T" onclick="input_Run(this.value);playbtnsound()">T</button></td>
    <td><button type="button" class="btn" value="L" onclick="input_Run(this.value);playbtnsound()">L</button></td>
    <td><button type="button" class="btn" value="J" onclick="input_Run(this.value);playbtnsound()">J</button></td>
    <td class="btn-placeHolder"></td>
    <td><button type="button" class="btn" id="zero" value="0" onclick="input_Run(this.value);playbtnsound()">0</button></td>
    <td class="btn-placeHolder"> </td>
  </tr>
  <tr id="fifthLine" >
    <td><button type="button" class="btn" value="P" onclick="input_Run(this.value);playbtnsound()">P</button></td>
    <td><button type="button" class="btn" value="Q" onclick="input_Run(this.value);playbtnsound()">Q</button></td>
    <td><button type="button" class="btn" value="D" onclick="input_Run(this.value);playbtnsound()">D</button></td>
    <td><button type="button" class="btn" value="A" onclick="input_Run(this.value);playbtnsound()">A</button></td>
    <td><button type="button" class="btn" value="V" onclick="input_Run(this.value);playbtnsound()">V</button></td>
    <td class="btn-placeHolder"> </td>
    <td class="btn-placeHolder"> </td>
    <td class="btn-placeHolder"> </td>
  </tr>

  <tr id="sixthLine" >
    <td> <button type="button" class="btn" value="H" onclick="input_Run(this.value);playbtnsound()">H</button></td>
    <td class="btn-placeHolder"> </td>
    <td colspan="2"> <button type="button" class="btn max-btn" value=" " onclick="input_Run(this.value);playbtnsound()">SPACE</button></td>
    <td colspan="2"> <button type="button" class="btn max-btn" onclick="backspace();playbtnsound()">DELETE</button></td>
    <td colspan="2"> <button type="button" class="btn max-btn" onclick="clearit();playbtnsound()">CLEAR</button></td>
    </div>
</table>

Answer 2

你可以使用这个属性 :

#firstLine ,
#secondLine ,
#thirdLine ,
#fourthLine ,
#fifthLine ,
#sixthLine {
  white-space: nowrap
}

或使用此属性:

#firstLine ,
#secondLine ,
#thirdLine ,
#fourthLine ,
#fifthLine ,
#sixthLine {
    display: flex;
}

缩放时如何将按钮保持在 div 内？

How do I keep buttons inside a div when scaling?

html

css

button

responsive