[英]How to align two elements on the same line from PHP
我想將兩個$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;
}
只需稍微調整一下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
類(我發明的className,而不是約定)添加到.max
div。
要將項目置於父項中心,請添加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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.