I'm having some trouble creating a simple store page. One of the products is supposed to look like this:
https://i.sstatic.net/JLlua.png
However, it's currently showing up like this:
https://i.sstatic.net/hHYUm.png
I've been attempting to use inline block so that I can have the negotiate button and product price on the same line, with the button aligned to the left and the price to the right. But for some reason, inline block isn't behaving as expected. Can anyone help me figure out 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>