内联块未产生预期的效果

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

您无需为价格使用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>

Answer 3

您将display: inline-block赋予父元素。我认为您必须将其提供给child元素。

因此，从display: inline-block元素中删除#inline并将其分配给#negButton和p元素