Horizontal Radio Buttons | Community
Skip to main content
Robb_Barrett
Robb_Barrett
Level 10
Apr 4, 2016 8:14 PM UTC
Solved

Horizontal Radio Buttons

I've seen a couple of threads about making radio buttons horizontal but I've yet to get it to work. Can someone point me in the right direction?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Robb_Barrett
Robb_BarrettAccepted solution
Level 10
Apr 4, 2016 9:44 PM UTC

That didn't work, but this did:

.mktoRadioList>label, .mktoRadioList>input {display: inline-block !important; margin-right: 1em !important;margin-left: .5em !important;}

.mktoForm input[type=radio] {float: none;}

Robb Barrett
View reply

10 replies

Anonymous
Aug 15, 2017 6:18 PM UTC

YAYAYAYAY!!! I have been trying to figure this out for a while and finally googled the right words to get your answer!! yayay!! thank you!

Translate
    Diego_Lineros2
    Diego_Lineros2
    Level 5
    Nov 16, 2016 12:26 PM UTC

    Wrap it in a field set and put that

    <style>

    fieldset input[type=radio] + label  { display: inline !important; margin-right:1.5em !important; margin-left: 0 !important;

    }

    fieldset input[type="radio"] {float: none !important;}

    </style>

    Translate
    Robb_Barrett
    Robb_BarrettAuthor
    Level 10
    Apr 4, 2016 10:11 PM UTC

    Didn't work for me in Chrome.

    Translate
    Robb Barrett
    SanfordWhiteman
    SanfordWhiteman
    Level 10
    Apr 4, 2016 10:32 PM UTC

    OK, in this particular case I had done a quick FF check.  Interesting anomaly.

    Translate
    Robb_Barrett
    Robb_BarrettAuthorAccepted solution
    Level 10
    Apr 4, 2016 9:44 PM UTC

    That didn't work, but this did:

    .mktoRadioList>label, .mktoRadioList>input {display: inline-block !important; margin-right: 1em !important;margin-left: .5em !important;}

    .mktoForm input[type=radio] {float: none;}

    Translate
    Robb Barrett
    SanfordWhiteman
    SanfordWhiteman
    Level 10
    Apr 4, 2016 10:08 PM UTC

    I injected that CSS right into your page:

    Translate
    SanfordWhiteman
    SanfordWhiteman
    Level 10
    Apr 4, 2016 9:08 PM UTC

    In the form you sent me:

    LABEL[for="USCANHITRADPurchaseTiming"] ~ .mktoRadioList INPUT[type="radio"],
    LABEL[for="USCANHITRADInquiryType"] ~ .mktoRadioList INPUT[type="radio"] {
        clear: none !important;
    }
    Translate
    SanfordWhiteman
    SanfordWhiteman
    Level 10
    Apr 4, 2016 8:23 PM UTC

    Hey Robb --

    Set up a form with a few buttons and post the link (so I don't have to create another form in my lab) and I'll show you how.

    Translate
      Terms & ConditionsAccessibility statement

      Loading footer...