2

我试图弄清楚如何使我的单选按钮与按钮之间的填充或空间水平对齐。我已经尝试在互联网上搜索，但您无法在互联网上找到所有内容，所以现在我在这里。我愿意使用 Javascript 和 JQuery。

这是我的 JSFiddle：http: //jsfiddle.net/547fx/1/

这是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>";
    }
}
}
4

4 回答 4

4

尝试使用 CSS

小提琴演示

#navlist li
{
    display:inline;
}
于 2013-09-14T00:20:51.393 回答
2

很容易...

看演示

CSS：

ul, li { display: inline; }
于 2013-09-14T00:21:04.713 回答
2

您可以使用 CSS 来控制它

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

这是更新jsfiddle

http://jsfiddle.net/547fx/5/

于 2013-09-14T00:22:39.917 回答
1

把它们都放在一个<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>
于 2013-09-14T00:20:08.820 回答