如何更改同一行元素的位置

我有一个包含 3 个元素的块 - 最小值、产品库存、最大值。

我需要做的就是找到一种方法将产品库存调整到两个值之间。

我的猜测是问题应该出在这些线上：

<style>
    .inline-parent{text-align:center;}
    .inline-block{display:inline-block;margin-right:10px;}
</style>
<div class="max inline-parent">
    <div class="inline-block"><?php echo $tickets_sold;?></div>
    <div class="inline-block"><?php echo $max_tickets;?></div>
</div>

我的浏览器呈现如下文件：（屏幕截图） https://i.stack.imgur.com/woOYx.png

检查元素显示如下：（屏幕截图） https://i.stack.imgur.com/2coty.png

Flex 的使用错误 https://i.stack.imgur.com/2vVD3.png 甚至最糟糕 https://i.stack.imgur.com/AaQfd.png

CSS -

.wcl-progress-meter meter::-webkit-meter-suboptimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
  background: #cb132b;
  display:inline-block;

}


.wcl-progress-meter .zero {
  display: inline-block;
  position: absolute;
  top: -100%;
}

.wcl-progress-meter .min {
  display: inline-block;
  position: absolute;
  top: -100%;
}

.wcl-progress-meter .max {
  display: inline-block;
  position: absolute;
  top: -100%;
  right: 0;

}

PHP-我尝试编辑代码的文件

$max_tickets                = $product->get_max_tickets();
$tickets_sold    = wc_get_stock_html( $product );

<div class="wcl-progress-meter <?php if($product->is_max_tickets_met()) echo 'full' ?>"> 
               <progress  max="<?php echo $max_tickets ?>" value="<?php echo $lottery_participants_count ?>"  low="<?php echo $min_tickets ?>"></progress></br> 
                <span class="zero">0</span>
<style>
    .inline-parent{text-align:center;}
    .inline-block{display:inline-block;margin-right:10px;}
</style>
<div class="max inline-parent">
    <div class="inline-block"><?php echo $tickets_sold;?></div>
    <div class="inline-block"><?php echo $max_tickets;?></div>
</div>

CSS flexbox 将帮助您轻松实现这一目标。

检查这个小提琴 https://jsfiddle.net/70cjvto8/

了解 CSS flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.value-container{
  width: 600px;
  display: flex;
  justify-content: space-between;
}

UPDATE:

确保您从中取出跨度wcl 进度表div 并将其放入其中max div

你也可以摆脱内联块班级。请参阅下面的代码。

 <span class="zero">0</span>

PHP:

<div class="max">
    <span class="zero">0</span>
    <div><?php echo $tickets_sold;?></div>
    <div><?php echo $max_tickets;?></div>
</div>

CSS:

.max{
  display: flex;
  justify-content: space-between;
}

更新：2（如果删除绝对位置，下面的 CSS 应该可以工作）

.wcl-progress-meter meter::-webkit-meter-suboptimum-value {
   box-shadow: 0 5px 5px -5px #999 inset;
   background: #cb132b;
   display:inline-block;
 }

.wcl-progress-meter .zero {
 /* try removing the CSS */
}

.wcl-progress-meter .min {
/* try removing the CSS */
}

.wcl-progress-meter .max {
   display: flex;
   justify-content: space-between;
}