如何让这个 woocommerce 收音机复选框水平显示，而不是垂直显示？答案

【问题标题】：How do I make this woocommerce radio checkbox to display horizontally next to each other instead of vertically?如何让这个 woocommerce 收音机复选框水平显示，而不是垂直显示？
【发布时间】：2021-10-26 09:53:47
【问题描述】：

此单选框

add_action( 'woocommerce_review_order_before_payment', 'display_extra_fields_after_billing_address' , 10, 1 );
function display_extra_fields_after_billing_address () { 
    ?>
    <p><input type="radio" name="delivery_option" value="29 x 1" required />29 x 1</p>
    <p><input type="radio" name="delivery_option" value="27 x 2" />27 x 2</p>
    <p><input type="radio" name="delivery_option" value="25 x 3" />25 x 3</p>

<?php
}

我可以在 functions.php 或元素的自定义 CSS 中添加什么以使它们水平而不是垂直相邻？

【问题讨论】：

使用 css display: inline 或 display: inline-block

标签： php html css wordpress woocommerce

【解决方案1】：

 You can use css `display: inline or display: inline-block` :
 <p style="display:inline-block"><input type="radio" name="delivery_option" value="29 x 1" required />29 x 1</p>
 <p style="display:inline-block"><input type="radio" name="delivery_option" value="27 x 2" />27 x 2</p>
 <p style="display:inline-block"><input type="radio" name="delivery_option" value="25 x 3" />25 x 3</p>

【讨论】：