问题描述:

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.net/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.com/';\">att 8gb black</input>";

} else if (q1 == "Other") {

document.getElementById("linkDiv").innerHTML = "<input type=button value=Next

onclick=\"window.location.href='http://yahoo.com/';\">other 8b white</input>";

} else if (q1 == "Unlocked") {

document.getElementById("linkDiv").innerHTML = "<input type=button value=Next

onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>";

}

}

}

网友答案:

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.net/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>
相关阅读:
Top