如何从同一行更改元素的位置 [英] How to change place of elements from same line

问题描述

我有一个由3个要素组成的区块-最小值，产品库存，最大值.

I have a block from 3 elements - minimum value, stock of a product, maximum value.

我要做的就是找到一种方法来使产品库存在两个值之间的中间对齐.

All i need to do is to find a way to align the stock of the product in the middle between both values.

我的猜测是问题应该出在以下几行上:

My guess is that the problem should be somewhere on these lines:

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

我的浏览器将文件渲染如下:(截图)

对该元素的检查显示如下:(截图)

使用Flex错误甚至更糟

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

PHP- file where i tried to edit the code

$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将帮助您轻松实现这一目标.

CSS flexbox will help you achieve this easily.

检查此小提琴

了解CSS flex

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

更新:

确保从 wcl-progress-meter div中取出跨度，并将其放在 max div

Make sure you take out the span from wcl-progress-meter div and put it inside max div

您还可以摆脱 inline-block 类.请参阅下面的代码.

You can also get rid of inline-block class. Refer below Code.

 <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应该会在下面起作用)

UPDATE : 2 (Below CSS should work if you remove the absolute position)

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

这篇关于如何从同一行更改元素的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！