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

ContentProvider.attachinfo()

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

Answer 3

Flexbox的

应用display：flex;到父容器并通过justify-content调整其子容器的位置：space-between;像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 4

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

大多数HTML标记都显示为块。这意味着他们将获得尽可能宽的空间＆＃39; br＆＃39;标签没有什么不同。解决方案正在浮动由于您要将两个标签对齐到左侧，因此您应该具有如下结构：

<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的显示模式更改为＆＃39; display：inline-block＆＃39;做同样的工作。这取决于你。

如何将按钮与文本（标签）

5 个答案: