如何使用填充使单选按钮水平
How to make radio buttons horizontal with padding
我正在尝试弄清楚如何使我的单选按钮与按钮之间的填充或空格水平对齐。我试过搜索互联网,但你无法在互联网上找到所有内容,所以现在我在这里。我愿意使用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>";
}
}
}
尝试使用 CSS
小提琴演示
#navlist li
{
display:inline;
}
非常容易...
看演示
.CSS:
ul, li { display: inline; }
您可以使用 CSS 控制它
ul li {
display: inline-block;
margin-right:30px;
}
这是更新 jsfiddle
http://jsfiddle.net/547fx/5/
只需将它们全部放在一个<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>
相关文章:
- 多个单选按钮组相互干扰
- 是否可以禁用jquery中的单个单选按钮
- Javascript:无法获取变量中的单选按钮值
- 通过ajax到php文件获取单选按钮值
- 互斥单选按钮和相应的输入字段
- 用于选择MVC3中单选按钮值的JavaScript
- 如何获取单选按钮的多个实例的选定单选按钮值
- react testUtils模拟点击单选按钮而不触发onchange
- 当选择组中的单选按钮时,jQuery addClass
- Angularjs无法将单选按钮与嵌套范围内的模型绑定
- 客户端单选按钮列表验证
- Javascript:图像与单选按钮的值不匹配
- 如何在Javascript中将单选按钮值保存到cookie中
- 单击时如何更改单选按钮的CSS
- 使用按钮和单选按钮提交表单,但始终使用相同的值
- 注入Javascript以选择具有指定值的所有单选按钮
- 使用 angularjs 创建水平单选按钮
- 如何使用填充使单选按钮水平
- 如何使用jquery-mobile以水平样式显示垂直单选按钮
- JQuery移动自定义水平单选按钮在实际设备中不起作用