Changing Radio button from vertical to horizontal alignment on new form of list

Question

I have multiple radio buttons(choice column) on new form of a SharePoint list.

Each of my choice column contains 10 values ranging from 1 to 10(10 radio buttons) and they are displayed vertically.

What I want to do is to display all radio button horizontally in one line.

Any suggestions on how to do it?

Thanks

Answer 1

Try with margin-left CSS。

Demo:

<style type="text/css">
        input[type="radio"] {
            margin-left: 10px;
        }
    </style>

<input type="radio" checked="checked" name="edit" value="A">A
    <input type="radio" name="edit" value="B">B
    <input type="radio" name="edit" value="C">C

Update:

Try this JS code:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            var reBuildTR = $('<tr></tr>').append("<th></th>");
            //update RadioField as your field name
            $('table[id^="RadioField"]').find('td').each(function () {
                $(reBuildTR).append($(this));
            })
            $('table[id^="RadioField"]').html("").append(reBuildTR);
        })
    </script>