Javascript 如何使用填充使单选按钮水平

我正试图找出如何使我的单选按钮与按钮之间的填充或空间水平对齐。我试着在网上搜索，但是你在网上找不到所有的东西，所以现在我在这里。我愿意使用Javascript和JQuery

以下是我的JSFIDLE：

下面是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>";
    }
}
}

函数tryToMakeLink（）{
//获取所有选定的收音机
var q1=document.querySelector（'input[name=“q1”]：checked'）；
//确保用户已选择所有3个选项
如果（q1==null）{
document.getElementById（“linkDiv”）.innerHTML=“”；
}否则{
//现在我们知道我们有3台收音机，所以获取它们的值
q1=q1.0；数值；
//现在检查这些值以显示所需配置的不同链接
如果（q1==“AT&T”）{
document.getElementById（“linkDiv”）.innerHTML=“att 8gb黑色”；
}如果（q1==“其他”）{
document.getElementById（“linkDiv”）.innerHTML=“其他8b白色”；
}否则，如果（q1==“未锁定”）{
document.getElementById（“linkDiv”）.innerHTML=“红色”；
}
}
}

把它们放在一个

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

你们有哪家航空公司？


ATT
其他
解锁

尝试使用CSS

很简单

看

CSS:

---

你可以用CSS控制它

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

下面是JSFIDLE的更新

---

哦。。。这是你第一行的

li

。。。修复：）如何在单选按钮之间添加填充或空格？使用填充。。这里演示：

li{padding:0 5px；}

如何在单选按钮之间添加填充或空格？您可以添加右边距：30px；在同一个css组中-更新了如何在单选按钮之间添加填充或空格？@Thomas:链接无效，Fiddle已断开。。我很想看

ul, li { display: inline; }

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