Horizontal Radio Buttons | Community
Skip to main content
Robb_Barrett
Robb_Barrett
Level 10
April 4, 2016
Solved

Horizontal Radio Buttons

  • April 4, 2016
  • 6 replies
  • 12912 views

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.
Best answer by Robb_Barrett

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;}

6 replies

SanfordWhiteman
SanfordWhiteman
Level 10
April 4, 2016

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.

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    April 4, 2016

    In the form you sent me:

    LABEL[for="USCANHITRADPurchaseTiming"] ~ .mktoRadioList INPUT[type="radio"],
    LABEL[for="USCANHITRADInquiryType"] ~ .mktoRadioList INPUT[type="radio"] {
        clear: none !important;
    }
    Robb_Barrett
    Robb_BarrettAuthorAccepted solution
    Level 10
    April 4, 2016

    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
    SanfordWhiteman
    SanfordWhiteman
    Level 10
    April 4, 2016

    I injected that CSS right into your page:

    Robb_Barrett
    Robb_BarrettAuthor
    Level 10
    April 4, 2016

    Didn't work for me in Chrome.

    Robb Barrett
    SanfordWhiteman
    SanfordWhiteman
    Level 10
    April 4, 2016

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

    Diego_Lineros2
    Diego_Lineros2
    Level 5
    November 16, 2016

    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>

    A
    Anonymous
    August 15, 2017

    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!

      Terms & ConditionsAccessibility statement

      Loading footer...