Ingin mempertahankan tata letak tombol yang sama saat menskalakan jendela atau dalam tampilan seluler. Untuk beberapa alasan tombol tidak akan tinggal di dalam div dan diatur ulang setelah lebar sekitar 1160px. Dan juga ...

0
luckytwotimes 5 April 2021, 15:00

2 jawaban

Jawaban Terbaik

Anda dapat menggunakan properti ini:

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

Atau gunakan properti ini:

#firstLine ,
#secondLine ,
#thirdLine ,
#fourthLine ,
#fifthLine ,
#sixthLine {
    display: flex;
}
0
fatemeh kazemi 5 April 2021, 13:11

Gunakan tabel HTML sebagai ganti 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>
0
Ibram Reda 5 April 2021, 12:52