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

Question

在缩放窗口或移动视图时，希望保持相同的按钮布局。由于某种原因，按钮不会停留在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

您可以使用此属性：

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

或使用此属性：

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

Answer 2

使用HTML表而不是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>