CODEWITHSUNDEEP
htmlcssweb
Mr Lord
Mr Lord

Reputation: 150

How do I put button in the same line with text (labels)

this is my code:

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

I want the button will be linked to the top of the 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>

Upvotes: 0

Views: 9865

Answers (5)

Ahs N
Ahs N

Reputation: 8366

Surround the labels with a div tag and float it left like so:

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

Here is the JSFiddle demo

Upvotes: 2

necilAlbayrak
necilAlbayrak

Reputation: 814

Most of the HTML tags are displayed as blocks. Which means they will take as much width available 'br' tag is not different. Solution is floating. Since you want to align two labels to left you should have a structure like follows:

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

Another solution is that: you can always change display type of the elements. In this case changing display mode of added div to 'display: inline-block' does the same job. It is up to you.

Upvotes: 0

Ankita Gavali
Ankita Gavali

Reputation: 81

Flexbox

Apply display: flex; to the parent container and adjust the placement of its children by justify-content: space-between; like this:

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

More for your reference https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Gowtham
Gowtham

Reputation: 1597

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

Upvotes: 1

Alaeddine Khelifi
Alaeddine Khelifi

Reputation: 71

Wrap your label tags in a div tag and set it to display:inline-block

Working code:

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

Upvotes: 0

Related Questions