I'm trying to figure out how to make my radio buttons align horizontally with padding or space between the buttons. I've tried searching the internet but you can't find everything on the internet so now I'm here. I'm open to using Javascript and JQuery.

Here's my JSFiddle: /

Here's the Javascript:

function tryToMakeLink() {
//get all selected radios
var q1 = document.querySelector('input[name="q1"]:checked');

//make sure the user has selected all 3
if (q1 == null) {
    document.getElementById("linkDiv").innerHTML = "<input type=button 
disabled=disabled value=Next>";
} else {
    //now we know we have 3 radios, so get their values
    q1 = q1.value;

    //now check the values to display a different link for the desired configuration
    if (q1 == "AT&T") {
        document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
onclick=\"window.location.href='/';\">att 8gb black</input>";
    } else if (q1 == "Other") {
        document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
onclick=\"window.location.href='/';\">other 8b white</input>";
    } else if (q1 == "Unlocked") {
        document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
onclick=\"window.location.href='/';\">red</input>";
    }
}
}

I'm trying to figure out how to make my radio buttons align horizontally with padding or space between the buttons. I've tried searching the internet but you can't find everything on the internet so now I'm here. I'm open to using Javascript and JQuery.

Here's my JSFiddle: http://jsfiddle/547fx/1/

Here's the Javascript:

function tryToMakeLink() {
//get all selected radios
var q1 = document.querySelector('input[name="q1"]:checked');

//make sure the user has selected all 3
if (q1 == null) {
    document.getElementById("linkDiv").innerHTML = "<input type=button 
disabled=disabled value=Next>";
} else {
    //now we know we have 3 radios, so get their values
    q1 = q1.value;

    //now check the values to display a different link for the desired configuration
    if (q1 == "AT&T") {
        document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
onclick=\"window.location.href='http://google./';\">att 8gb black</input>";
    } else if (q1 == "Other") {
        document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
onclick=\"window.location.href='http://yahoo./';\">other 8b white</input>";
    } else if (q1 == "Unlocked") {
        document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
onclick=\"window.location.href='http://wepriceit.webs./';\">red</input>";
    }
}
}

• javascript
• html
• css

4 Answers 4

Try using CSS

Fiddle Demo

#navlist li
{
    display:inline;
}

Very easy...

Look Demo

CSS:

ul, li { display: inline; }

You can control that with CSS with

ul li { 
    display: inline-block; 
    margin-right:30px;
}

Here's the update jsfiddle

http://jsfiddle/547fx/5/

Just put them all in one <li>

<form name="quiz" id='quiz'>What carrier do you have?
    <ul style="margin-top: 1pt" id="navlist">
        <li style="list-style: none;">
            <input type="radio" onclick=tryToMakeLink(); name="q1" value="AT&T" />ATT

            <input type="radio" onclick=tryToMakeLink(); name="q1" value="Other" />Other
            <input type="radio" onclick=tryToMakeLink(); name="q1" value="Unlocked" />Unlocked</li>
    </ul>
    <br>
    <div id=linkDiv>
        <input style="display: none;" type=button disabled=disabled value=Next />
    </div>
</form>