Встроенный блок не дает желаемого эффекта

Question

Я пытаюсь создать очень простую страницу магазина.Один из продуктов, который я хотел бы видеть так:

Но, к сожалению, он выглядит так:

Я пытаюсь использовать встроенный блок, чтобы кнопка согласования и цена продукта находились на одной линии, при этом кнопка перетаскивалась влево, а цена - вправо, но в линиюблок, кажется, не работает правильно.Может кто-нибудь сказать мне, почему?

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

Answer 1

Вы можете использовать display: flex; с flex-direction: row; для контейнера.

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

Answer 2

Вы даете display: inline-block родительскому элементу.Я думаю, что вы должны передать его дочернему элементу.

Итак, удалите display: inline-block из #inline элемента и передайте его #negButton и p элементу

Answer 3

Вместо использования тега p для вашей цены (который является block элементом) , consider using a span instead (which is an inline` элемент)

Затем вы можете удалить стиль из вашего #inline div

(обратите внимание, что в приведенном ниже фрагменте я заменил {{interpolation}}, чтобы вы могли просматривать пример без 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>