Wordpress 如何使这些单选按钮以内联方式显示？

我使用下面的代码向Woocommerce签出添加了一个提示字段。该代码将单选按钮一个置于另一个之上，并将标签置于单选按钮之下。如何使标签显示在单选按钮旁边以及单选按钮以内联方式显示

function bbloomer_checkout_radio_choice() {

   $chosen = WC()->session->get('radio_chosen');
   $chosen = empty( $chosen ) ? WC()->checkout->get_value('radio_choice') : $chosen;
   $chosen = empty( $chosen ) ? 'no_option' : $chosen;

   $args = array(
   'type' => 'radio',
   'class' => array( 'form-row-wide' ),
   'options' => array(
      'no_option' => 'None',
      'option_1' => '10%',
      'option_2' => '15%',
      'option_3' => '20%',
   ),
   'default' => $chosen
   );

   echo '<div id="checkout-radio">';
   echo '<h3>Add a TIP!</h3>';
   woocommerce_form_field( 'radio_choice', $args, $chosen );
   echo '</div>';

}

---

以下是解决此问题的CSS：

#checkout-radio label.radio {
  display: inline!important;
  margin-left: 5px;
}

#checkout-radio input[type=radio] {
  margin-left: 15px;
}

#checkout-radio label.radio {
  display: inline!important;
  margin-left: 5px;
}

#checkout-radio input[type=radio] {
  margin-left: 15px;
}

---

请分享这个输出的HTML以及当前的CSS读者无法明确说明为什么某个问题被否决，除非选民自己承认并解释。匿名投票在这里是允许的，为什么这种情况不太可能改变，历史悠久。也许在这种情况下，没有迹象表明你尝试过什么。您能否创建一个包含HTML/CSS的JS FIDLE或堆栈代码段，以便读者能够看到问题？我想有人会使用float:left。谢谢你的回复，它引导我找到了答案，我将在上面发布。

#checkout-radio label.radio {
  display: inline!important;
  margin-left: 5px;
}

#checkout-radio input[type=radio] {
  margin-left: 15px;
}