DEMO

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

请尝试以下代码：

echo ' <label class="lbl">Select Redeem when ready to use coupon at location</label>';    
echo '<input type=submit class=btn  id="'.$row['UniqueAdvertisingCode'].'" value="REDEEM"><br>';
echo ' <label class="lbl">Select Buy when ready to purchase product at location</label> <br>';
echo '<input type=submit class=btn id="'.$row['UniqueAdvertisingCode'].'"  value="BUY"> ';
echo ' <label class="lbl">Save coupon for later</label> <br>  ';
echo '<input type=submit class=btn id="'.$row['UniqueAdvertisingCode'].'"  value= "POUCHIT" > <br>';

DEMO

注意：仅仅因为你的按钮的css高度太大而且看起来不太好。

Answer 2

如果您能够为每个按钮定义宽度，这似乎有效：

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

更新：这是一个更新的小提示，以解决[来自评论]关于较小屏幕宽度的问题：

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

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

2 个答案:

DEMO