Question

我正在尝试创建此按钮组合：

但我不能把那两个迷你按钮（红色和蓝色）放在主按钮上，不知道怎么做？

这就是我所拥有的：

<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>

修改

这就是我的工作目标：

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

我在你看到的天蓝色按钮上需要两个迷你按钮。

<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

这是一个非常小的例子

＆＃13;

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

＆＃13;

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

＆＃13;

我在两个较小的按钮之间添加了注释，以删除它们之间的空格，因此您不应删除这些注释。

Answer 2

这样的东西有用吗？

function shuffle(array) {
  for(var i = array.length; i > 1; i--) {
    var r = Math.floor(Math.random() * i);
    var temp = array[r];
    array[r] = array[i-1];
    array[i-1] = temp;
  }
}

.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;
}

如何创建两个或更多按钮，底部有两个迷你按钮？

2 个答案: