如何将按钮与文本（标签）放在同一行

勋爵先生

这是我的代码：

<div class="itembox addition">
  <label id="lblItemPrice">Price: 10.90$</label>
  <br />
  <label id="lblShipping">Shipping: 0.99$</label>
  <button id="btnBuy" class="btn" style="float: right;">Buy</button>
</div>

我希望按钮将链接到div的顶部。

        .addition {
          width: 500px;
          padding: 20px 20px;
          cursor: default !important;
        }
        
        .itembox {
          cursor: pointer;
          background: #fff;
          line-height: 20px;
          box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
          display: block;
          padding: 10px 10px;
          text-align: left;
          display: table-cell;
        }
        
        .btn {
          background-color: transparent;
          border: 5px solid #616161;
          color: #616161;
          text-align: center;
          /*height: 50px;*/
          line-height: 50px;
          width: 100px;
          box-sizing: border-box;
          font-size: 22px;
          font-weight: bold;
          cursor: pointer;
        }

<div class="itembox addition">
  <label id="lblItemPrice">Price: 10.90$</label>
  <br />
  <label id="lblShipping">Shipping: 0.99$</label>
  <button id="btnBuy" class="btn" style="float: right;">Buy</button>
</div>

阿斯·N

用标签包围div标签并将其向左浮动，如下所示：

<div class="itembox addition">
    <div style="float:left"><label id="lblItemPrice">Price: 10.90$</label>
        <br>
        <label id="lblShipping">Shipping: 0.99$</label>

        <button id="btnBuy" class="btn" style="float: right;">Buy</button>
    </div>
</div>

这是JSFiddle 演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。