How do I make this woocommerce radio checkbox to display horizontally next to each other instead of vertically?

This radio checkbox

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
}

What can I add in functions.php or in the custom CSS of the element to make them adjacent horizontally instead of vertically?

Solutions

 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>
Tags: PHP / Html / Css

Similar questions

SQL Tables are listed vertically instead of horizontal on PhpMyAdmin
I am trying to move my WordPress website to a server on Godaddy. I have moved all the files and while trying to move the database, I couldn't see all the table data. Upon a closer look, I found that it is showing the data vertically instead of horizontal and without any scroll button. Please have a look at the image below for a clear understanding ...
How do I display four category posts that align next to each other? - Wordpress
I'm trying to pull the 4 most recent posts from category "3" to be displayed within a 1000px div, but have each single post display in a 280px div and have them displayed inline. Right now, my code pulls the recent posts, but only styles the one most recent post. Here is the current URL: http://dylanpolniak.com/clients/c&c/ Here is my code:
Wordpress posts won't display next to each other
I have been searching for a number of hours now and have tried to figure it out myself however I am having great difficulties resolving it. Basically, I have a wordpress loop in which I have, on my homepage, the post thumbnails displayed. They all appear vertically and I want it so that at least 3 images appear next to each other before starting a ...
How do I vertically center the rounded avatar to other elements in the row?
On this page I want to vertically center my rounded avatar to other elements in the row (fb / twitter buttons). Here's a snippet of code of the row: Thank you in advance and please let me know if I can make this question easier to understand, if needed.
How to disable remaining radio buttons if a specific radio button is checked?
I have the following bit of code generated by WooCommerce to display available shipping options: What I need to be able to do is disable radio buttons 2 and 3 if the first radio button is selected. I have tried this to no avail: Any help would be much appreciated! Thanks, Cynthia
Woocommerce custom checkout fields how to put them next to each other?
Hi guys I am making a custom form in woocommerce when checking out. I want to make my fields next to each other. How do I accomplish this? This is what I have now and it just places them under each other The way I add these fields might be important as well. I am presently doing this:

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.