内联块没有产生预期的效果答案

【问题标题】：Inline block not giving desired effect内联块没有产生预期的效果
【发布时间】：2019-03-18 04:13:58
【问题描述】：

我正在尝试构建一个非常基本的商店页面。我希望这样的产品之一：

但不幸的是它看起来像这样：

我正在尝试使用内联块将协商按钮和产品价格放在同一行，将按钮拖到左侧，将价格拖到右侧，但内联块似乎无法正常工作。谁能告诉我为什么？

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

【问题讨论】：

标签： angular html twitter-bootstrap css

【解决方案1】：

您将display: inline-block 提供给父元素。我认为你必须把它交给子元素。

所以从 #inline 元素中删除 display: inline-block 并将其提供给 #negButton 和 p 元素

【讨论】：

【解决方案2】：

您可以将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>

【讨论】：

【解决方案3】：

而不是使用p 标记您的价格（这是一个block 元素）, consider using aspaninstead (which is aninline` 元素）

然后您可以从 #inline div 中删除样式

（请注意，在下面的 sn-p 中，我已经替换了 {{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>

【讨论】：