html - 无法在每个按钮下正确显示标签？

Question

我试图在每个按钮下显示标签。我有 3 个按钮和 3 个标签 .. 每个按钮一个，如果长度大于按钮它应该转到下一行，我试图在按钮下内联每个标签，我正在尝试对所有 3 行执行此操作.我尝试了一些 CSS 但不起作用？有人可以建议我应该考虑什么吗？

html

   echo '<input type=submit class=btn  id=\"'.$row['UniqueAdvertisingCode'].'\" value=REDEEM    > ';
   echo '<input type=submit class=btn id=\"'.$row['UniqueAdvertisingCode'].'\"  value=BUY       > ';
   echo '<input type=submit class=btn id=\"'.$row['UniqueAdvertisingCode'].'\"  value= POUCHIT > <br>';

   echo ' <label class=lbl>Select Redeem when ready to use coupon at location</label>   ';
   echo ' <label class=lbl>Select Buy when ready to purchase product at location</label>   ';
   echo ' <label class=lbl>Save coupon for later</label>   ';

CSS

  <style>
  .btn {
    width: 15em;  height: 4em;
   }


   .lbl{
       width: 15em;   height: 4em;

   }
  </style> 

Answer 1

如果您能够为每个按钮定义宽度，这似乎可行:

<label class="lbl">Select Redeem when ready to use coupon at location</label>
<input class="btn" value="Redeem" type="submit" id="redeem">

<label class="lbl">Select Buy when ready to purchase product at location</label>
<input class="btn" value="Buy" type="submit" id="buy">

<label class="lbl">Save coupon for later</label>
<input class="btn" value="Pouchit" type="submit" id="pouchit">

在 CSS 中:

.btn {
  height: 4em;
  width: 15em;
}
.lbl {
  position: absolute;
  top: 4em;
  width: 12em;
}

这是 jsfiddle:http://jsfiddle.net/FwhvR/1/

更新:这是一个更新的 fiddle ，用于解决[来自评论的]关于较小屏幕宽度的担忧:

http://jsfiddle.net/FwhvR/2/