当我添加一个<p>标签时，它会将它旁边的</p> <div>按下到下一行。我怎样才能把所有东西放在同一条线上？

Question

我正在创建在线商店，并且我正在尝试编辑代码以添加一些自定义功能。

我的网站是www.comfykitty.co

我试图添加＆＃34;更多样式可用＆＃34;以标题下方的线为中心（某些产品，如＆＃34; Fruit Print Bed＆＃34;）。我的价格浮动：左;和销售标签浮动：右;

我已经尝试了几个小时让它居中，但它要么转到另一条线路，要么保持在左边并且价格低于<div>。

我想我已经添加了相关的CSS和HTML代码，以显示我所做的事情。请帮助我将<p></p>放在价格和促销标记的同一行中心。我已经删除了HTML和if语句以及其他不相关的代码，这些代码执行了标记中不存在的其他内容（这就是为什么标记中没有任何内容）。

＆＃13;

＆＃13;

.pricearea {
  position: absolute;
  padding-left: 5px;
  width: 60px;
  height: 25px;
  border-radius: 5px;
  background-color: #d1b3ff;
  font-weight: bold;
  float: left;
  margin: 0 auto;
  font-family: Helvetica Neue;
}

.saletag_area {
  float: right;
}

＆＃13;

<div class="pricearea">
  //Code for displaying price would've been here
  <p style="color: red; display: inline;">Other Styles Available</p>


  <div class="saletag_area" style="display: inline;">
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以试试这个：

• 从position:absolute

中移除.pricearea

• 将text-align:center添加到.product-item--price

Answer 2

您可以使用float，然后为每个div提供相等的width：

.pricearea {
  /* position: absolute; */
  padding-left: 5px;
  /* width: 60px; */
  height: 25px;
  border-radius: 5px;
  background-color: #d1b3ff;
  font-weight: bold;
  /* float: left; */
  margin: 0 auto;
  font-family: Helvetica Neue;
}

.pricearea>div {
  float: left;
  width: 33.3333%;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

<div class="pricearea">
  <div class="text-left">$10</div>
  <div class="text-center">Other Styles Available</div>
  <div class="text-right saletag_area" style="display: inline;">save</div>
</div>