Question

屏幕截图： Inspect element shows: The "7 in stock" i want to align with the "10" bellow

我想对齐两个$elements以在同一行上显示。

<span class="max">
    <?php echo $tickets_sold, $max_tickets; ?>
</span>

不包括$tickets_sold时，$max_tickets会位于顶部。但是，当包含它时，它会立即进入下一行。

我尝试过许多不同的选项，例如&&和，但是它们从未出现在同一行。我相信解决方案很简单，但是我是初学者。

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

PHP代码

 <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>
    <span class="max">  <?php echo $tickets_sold, $max_tickets?></div></span>
</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;
  vertical-align: middle;
}

Answer 1

只需稍微调整一下HTML，一切就可以按照您的意愿工作：

<style>
    .flex-parent{display:flex;}
    .flex-child{flex-basis:content;margin-right:10px;}
</style>
<div class="max flex-parent">
    <div class="flex-child"><?php echo $tickets_sold;?></div>
    <div class="flex-child"><?php echo $max_tickets;?></div>
</div>

<style>
    .flex-parent{display:flex;}
    .flex-child{flex-basis:content;margin-right:10px;}
</style>
<div class="max flex-parent">
    <div class="flex-child">tickets_sold</div>
    <div class="flex-child">max_tickets</div>
</div>

或者，您也可以只使用display：inline：

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

<style>
    .inline-block{display:inline-block;margin-right:10px;}
</style>
<div class="max">
    <div class="inline-block">tickets_sold</div>
    <div class="inline-block">max_tickets</div>
</div>

更新：

请注意对第一个示例代码的更改-我忽略了将flex-parent类（我发明的类名，不是约定）添加到.max div。 / p>

要在父项中居中，请将justify-content:center;添加到父项：

<style>
    .flex-parent{display:flex;}
    .flex-child{flex-basis:content;margin-right:10px;justify-content:center;}
</style>
<div class="max flex-parent">
    <div class="flex-child"><?php echo $tickets_sold;?></div>
    <div class="flex-child"><?php echo $max_tickets;?></div>
</div>

使用display:inline-block方法：

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

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

如何在PHP的同一行上对齐两个元素

1 个答案:

更新：