Wie erstelle ich zwei oder mehr Tasten mit zwei Mini-Tasten an der Unterseite?

Question

Ich versuche, diese Tastenkombination zu erstellen:

Aber ich kann, dass zwei Mini-Tasten nicht gesetzt (die roten eine der blau) nach unten drückt die Haupttasten, eine Ahnung, wie dies zu tun? Diese

ist, was ich habe:

<button class="btn btn-info">P</button> 
<button class="btn btn-info">Q</button> 
<button class="btn btn-info">R</button> 
<button class="btn btn-info">S</button> 
<button class="btn btn-info">Z</button> 

EDIT

Das ist, was ich arbeiten:

http://i.stack.imgur.com/3KDFM.png

ich zwei auf der skyblau Minitasten benötigen Knöpfe, die du siehst.

<div class="container"> 
    <div class="row"> 
     <br> 
     <div style="text-align:left"> 
     <br> 
     <p><strong>Número de proposiciones simples a usar: </strong><input id="inp1" type="number" min="1" max="5"></input> 
     </p> 
     </div> 
     <table id="myTable" class="table table-bordered table-hover well"> 
     <tr id="trL1"> 
      <td><b>Proposición</b></td> 
      <td><b>Valor de verdad</b></td> 
     </tr> 
     <tr id="trL2"> 
      <td id="PLF">Arma tu proposición con los botones de abajo</td> 
      <td id="VoF"> ¿¿ V o F ??</td> 
     </tr> 
     <tr style="text-align:left" id="btnsL"> 
      <td colspan="2" id="btnL"> 
      <button class="vL1 vL3i btn btn-info">(</button><button class="vL1 vL3f btn btn-info" disabled>)</button><button class="vL1 oL btn btn-info" disabled="disabled">∨</button><button class="vL1 oL btn btn-info" disabled="disabled">∧</button><button class="vL1 oL btn btn-info" disabled="disabled">⇒</button><button class="vL1 oL btn btn-info" disabled="disabled">⇔</button> 
      <br> 
      <button class="vL1 vL3n btn btn-info">∼</button><button class="btn btn-info">P</button><button class="btn btn-info">Q</button><button class="btn btn-info">R</button><button class="btn btn-info">S</button><button class="btn btn-info">Z</button> 

      </td> 
     </tr> 
     </table> 
     <button id="respuesta">Ver Resultado</button><button id="borrarPL">Borrar</button><button id="restartPL">Reiniciar</button> 
     <p id="contC"><strong>10</strong></p> caracteres restantes<br><br><br><br> 

    </div> <!-- Fin row --> 
    <div class="row"> 
     <div class="procedimiento"> 
     <table class="table table-bordered table-hover well"> 
      <tr style="color:rgb(100,130,130)"><td>procedimiento 1</td><td>procedimiento 2</td><td>procedimiento 3</td><td>procedimiento 4</td><td>procedimiento 5</td></tr> 
     </table> 
     </div> 
    </div> 
</div> 

Answer 1

hier ist ein sehr kleines Beispiel

.buttonWrapper{ 
 
    width: 50px; 
 
    height: 75px; 
 
} 
 

 
.big{ 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 

 
.small{ 
 
    width: 50%; 
 
    height: 25px; 
 
    display: inline-block; 
 
    }

<div class="buttonWrapper"> 
 
    <button class="big">P</button> 
 
    <button class="small">1</button><!-- 
 
--><button class="small">2</button> 
 
</div>

Ich habe Kommentare zwischen den beiden kleineren Tasten <!-- --> den Leerraum zwischen ihnen zu entfernen, so shouldn Sie entferne diese Kommentare nicht.

Answer 2

Ist so etwas von irgendeiner Verwendung?

.container{ 
 
    position:relative; 
 
    float:left; 
 
    width:70px; 
 
    height:70px; 
 
    margin-right:5px; 
 
} 
 
.btn-info{ 
 
    width:100%; 
 
    height:100%; 
 
    font-size:30px; 
 
} 
 
.btn-miniLeft{ 
 
    position:absolute; 
 
    left:0px; 
 
    width:50%; 
 
    border-color:red; 
 
} 
 
.btn-miniRight{ 
 
    position:absolute; 
 
    right:0px; 
 
    width:50%; 
 
    border-color:blue; 
 
}

<div class="container"> 
 
     <button class="btn btn-info">P</button> 
 
     <button class="btn btn-miniLeft">P1</button> 
 
     <button class="btn btn-miniRight">P2</button> 
 
</div> 
 
<div class="container"> 
 
     <button class="btn btn-info">Q</button> 
 
     <button class="btn btn-miniLeft">Q1</button> 
 
     <button class="btn btn-miniRight">Q2</button> 
 
</div> 
 
<div class="container"> 
 
     <button class="btn btn-info">R</button> 
 
     <button class="btn btn-miniLeft">R1</button> 
 
     <button class="btn btn-miniRight">R2</button> 
 
</div> 
 
<div class="container"> 
 
     <button class="btn btn-info">S</button> 
 
     <button class="btn btn-miniLeft">S1</button> 
 
     <button class="btn btn-miniRight">S2</button> 
 
</div> 
 
<div class="container"> 
 
     <button class="btn btn-info">Z</button> 
 
     <button class="btn btn-miniLeft">Z1</button> 
 
     <button class="btn btn-miniRight">Z2</button> 
 
</div>