当我添加一个 标签，它推下了 next to it onto the next line. How can I keep everything on the same line?

Question

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

我的网站是www.comfykitty.co

我正在尝试在标题下方（某些产品，如“水果打印床”）中间添加“更多样式可用”。我的价格浮动：左;和销售标签浮动：正确;

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

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

.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;
}

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

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>