我把按钮在同一行文本（标签）

Question

这是我的代码怎么办：

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

Answer 1

环绕有div标签标签和漂浮它留下像这样：

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

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

Here is the JSFiddle demo

Answer 2

环绕你label标签在div标签，并将其设置到display:inline-block

工作代码：

<div class="itembox addition"> 
<div style="display:inline-block"> 
    <label id="lblItemPrice">Price: 10.90$</label> 
    <br /> 
    <label id="lblShipping">Shipping: 0.99$</label> 
</div> 

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

Answer 3

.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; 
 
} 
 
.right{ 
 
    float:right; 
 
} 
 
.left{ 
 
    float:left; 
 
}

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

Answer 4

Flexbox的

应用显示：弯曲;到父容器并通过justify-content：space-between调整子级的位置;像这样：

 .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; 
 
      display: flex; 
 
      justify-content: space-between; 
 
     } 
 
     
 
     .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"> 
 
    <div class="partone"> 
 
     <label id="lblItemPrice">Price: 10.90$</label> 
 
     <br /> 
 
     <label id="lblShipping">Shipping: 0.99$</label> 
 
    </div> 
 

 
    <button id="btnBuy" class="btn">Buy</button> 
 

 
</div>

更多供您参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

大部分的HTML标签显示为块。这意味着他们将采取尽可能多的宽度可用'br'标签没有不同。解决方案是浮动的由于要对齐两个标签到左，你应该有一个结构类似如下：

<div class="itembox addition"> 
    <div style="float:left;"><!-- div that changes structure --> 
    <label id="lblItemPrice">Price: 10.90$</label> 
    <br /> 
    <label id="lblShipping">Shipping: 0.99$</label> 
    </div> 
    <button id="btnBuy" class="btn" style="float: right;">Buy</button> 
    <div style="clear:both;"></div> <!-- clearfix: you should use it whenever you use float or you will have problems --> 

另一种解决方案是：你可以随时更改的元素的显示类型。在这种情况下，将添加的div的显示模式更改为'display：inline-block'会执行相同的工作。它是由你决定。