html - 如何从同一行更改元素的位置
问题描述
我有一个来自 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>
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 将帮助您轻松实现这一目标。
.value-container{
width: 600px;
display: flex;
justify-content: space-between;
}
更新:
确保从wcl-progress-meter div中取出 span并将其放入max div
您还可以摆脱inline-block类。请参阅下面的代码。
<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;
}
推荐阅读
- oracle - oracle 安装程序在完成安装之前消失
- swift - 如何使用 Spritekit 和 GameplayKit 在 Swift 中为移动的 GKAgent2D 制作动画?
- javascript - 在思考如何解决我的问题时需要帮助
- node.js - 无法在机器上安装 Angular CLI
- active-directory - 如何使用 PowerShell 脚本在 AD USER 的邮件属性中添加前缀?
- python - 如何从 django 主 urls 文件中的应用程序导入 url
- reactjs - 让 React useEffect 检查视频链接是否有视频可用
- python - 我可以在 python 线程中使用全局队列吗?
- arrays - 通过 bash 脚本中的 jq 将对象添加/附加到具有相同键的新创建的 json 数组
- javascript - JavaScript 获取文本