CODEWITHSUNDEEP
angularhtmltwitter-bootstrapcss
Oblivion
Oblivion

Reputation: 635

Inline block not giving desired effect

I'm trying to build a very basic store page. One of the products i would like to appear like this:

enter image description here

But unfortunately it is appearing like this:

enter image description here

I'm trying to use inline block to have the negotiate button and product price on the same line, with the button dragged to the left and the priced dragged to the right, but inline block doesnt seem to be working correctly. Can anyone tell me why?

#popularSection {
  background-color: blue;
}

#product {
  outline: 1px solid grey;
  margin: 15px;
  background-color: lightblue;
  padding-top: 10px;
}

#negButton {
  margin-bottom: 10px;
}

#inline {
  margin: 0;
  padding: 0;
  display: inline-block;
}

img {
  width: 190px;
  height: 140px;
}
<div class="container">
  <div class="row" id="popularSection">
    <div class="col-lg-3 text-center">
      <div id="product">
        <img class="img-responsive" src={{path}}/>
        <p>{{productName}}</p>
        <div id="inline">
          <button class="btn btn-success btn-sm" type="button" id="negButton" (click)="negotiate()">Negotiate</button>
          <p>{{price}}</p>
        </div>
        <button class="btn btn-success btn-sm" type="button" id="addCart" (click)="addCart()">Add To Cart</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 61

Answers (3)

Gabbr Issimo
Gabbr Issimo

Reputation: 111

You are giving display: inline-block to the parent element. I think you must give it to the child element.

So remove display: inline-block from #inline element and give it to #negButton and the p element

Upvotes: 0

Kim Kern
Kim Kern

Reputation: 60357

You can use display: flex; with flex-direction: row; for the container. 

#popularSection {
  background-color: blue;
}

#product {
  outline: 1px solid grey;
  margin: 15px;
  background-color: lightblue;
  padding-top: 10px;
}

#negButton {
  margin-bottom: 10px;
}

#inline {
  display: flex;
  flex-direction: row;
}

img {
  width: 190px;
  height: 140px;
}
<div class="container">
  <div class="row" id="popularSection">
    <div class="col-lg-3 text-center">
      <div id="product">
        <img class="img-responsive" src={{path}}/>
        <p>{{productName}}</p>
        <div id="inline">
          <button class="btn btn-success btn-sm" type="button" id="negButton" (click)="negotiate()">Negotiate</button>
          <span>{{price}}</span>
        </div>
        <button class="btn btn-success btn-sm" type="button" id="addCart" (click)="addCart()">Add To Cart</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

user184994
user184994

Reputation: 18281

Instead of using a p tag for your price (which is a block element), consider using aspaninstead (which is aninline` element)

You can then remove the style from your #inline div

(Please note that in the snippet below, I've replaced the {{interpolation}} so that you can view the example without Angular)

#popularSection {
  background-color: blue;
}

#product {
  outline: 1px solid grey;
  margin: 15px;
  background-color: lightblue;
  padding-top: 10px;
}

#negButton {
  margin-bottom: 10px;
}

#inline {
  margin: 0;
  padding: 0;
  display: inline-block;
}

img {
  width: 190px;
  height: 140px;
}
<div class="container">
  <div class="row" id="popularSection">
    <div class="col-lg-3 text-center">
      <div id="product">
        <img class="img-responsive" src="https://craft.com.au/images/products/FPA13.jpg" />
        <p>Product 1</p>
        <div>
          <button class="btn btn-success btn-sm" type="button" id="negButton" (click)="negotiate()">Negotiate</button>
          <span >100</span>
        </div>
        <button class="btn btn-success btn-sm" type="button" id="addCart" (click)="addCart()">Add To Cart</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions