Javascript 在div中对齐单选按钮
这是我第一次尝试将javscript与html/css结合使用。我有一个按钮,点击后会显示一个问题,还有三个单选按钮。到目前为止一切都很好,但我希望单选按钮与左侧的实际按钮对齐(而不是文本)。content div是居中的,所以看起来它只是将单选按钮居中到页面,而不是相对的。我想如果你看看我的链接,你就会明白: 关于我如何获得我在这里寻找的影响,有什么想法吗?诚然,这是相当笨重,但婴儿步骤:) 这是我的html:Javascript 在div中对齐单选按钮,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是我第一次尝试将javscript与html/css结合使用。我有一个按钮,点击后会显示一个问题,还有三个单选按钮。到目前为止一切都很好,但我希望单选按钮与左侧的实际按钮对齐(而不是文本)。content div是居中的,所以看起来它只是将单选按钮居中到页面,而不是相对的。我想如果你看看我的链接,你就会明白: 关于我如何获得我在这里寻找的影响,有什么想法吗?诚然,这是相当笨重,但婴儿步骤:) 这是我的html: <!-- Here is the main content -->
<!-- Here is the main content -->
<div class="content">
<h1>Quiz With Javascript</h1>
<p>This is a simple quiz leveraging javascript.</p>
<div class="btn-group">
<input type="button" class="btn btn-primary btn-lg" onclick="showDiv()" value="Click Here For The Question" />
</div>
<div id="question1">
<h3>Where Does Phil Work?</h3>
<div>
<form>
<input type="radio" name="work" id="optionsRadios1" value="INTUIT">Intuit<br>
<input type="radio" name="work" value="GOOGLE">Google<br>
<input type="radio" name="work" value="AMAZON">Amazon<br>
</form>
</div>
<script src="js/quiz.js"></script>
<script type="text/javascript">
function showDiv() {
document.getElementById('question1').style.display = "block";
}
</script>
</div>
body {
margin: 50px 0px;
padding: 0px;
background-color: #7FFFD4;
border-radius: 25px;
}
.content {
text-align: center;
}
input[type='radio']{
vertical-align: baseline;
padding: 10px;
margin: 10px;
}
试试这个:
<form style="">
<div class="centerDiv">
<input type="radio" name="work" id="optionsRadios1" value="INTUIT">Intuit<br>
<input type="radio" name="work" value="GOOGLE">Google<br>
<input type="radio" name="work" value="AMAZON">Amazon<br>
</div>
</form>
形式{
}
显示:-moz内联框;文本对齐:左对齐代码>在家长为我做的。谢谢
.centerDiv {
display: inline-block;
margin: auto;
text-align: left;
}
padding-left: 559px;
text-align: left;