Question

尝试获取单选按钮，问题并在页面中间回答，任何帮助都会很棒，这是我的代码!!

 <form action='process.php?id=1' method='post' id='quizForm' id='1' onSubmit='validateForm()' name='myForm'>
    <ol>
        <li>
            <h3>1 x 1 =</h3>
            <div>
                <input type='radio' name='answerOne' id='answerOne' value='A' />
                <label for='answerOneA'>A)1</label>
            </div>
            <div>
                <input type='radio' name='answerOne'  id='answerOne' value='B' />
                <label for='answerOneB'>B)2</label>
            </div>
            <div>
                <input type='radio' name='answerOne' id='answerOne' value='C' />
                <label for='answerOneC'>C)3</label>
            </div>
        </li>
        <li>
            <h3>1 x 6 =</h3>
            <div>
                <input type='radio' name='answerTwo' id='answerTwo' value='A' />
                <label for='answerTwoA'>A)5</label>
            </div>
            <div>
                <input type='radio' name='answerTwo' id='answerTwo' value='B' />
                <label for='answerTwoB'>B)6</label>
            </div>
            <div>
                <input type='radio' name='answerTwo' id='answerTwo' value='C' />
                <label for='answerTwoC'>C)4</label>
            </div>
        </li>
        <li>
            <h3>2 x 8 =</h3>
            <div>
                <input type='radio' name='answerThree' id='answerThree' value='A' />
                <label for='answerThreeA'>A)14</label>
            </div>
            <div>
                <input type='radio' name='answerThree' id='answerThree' value='B' />
                <label for='answerThreeB'>B)12</label>
            </div>
            <div>
                <input type='radio' name='answerThree' id='answerThree' value='C' />
                <label for='answerThreeC'>C)16</label>
            </div>
        </li>
    </ol>
    <input type="submit" />
</form>

Answer 1

我用一个示例解决方案为您创建了基本的小提琴，检查这是否是您需要的。 http://jsfiddle.net/bhd2C/

我只是把你的表单放到一个div中，我创建了一个简单的css类：

.content {
  width:100%
  margin:0 auto;
  text-align:center;
}

Answer 2

<form style='text-align:center' action='process.php?id=1' method='post' id='quizForm' id='1' onSubmit='validateForm()' name='myForm'>
<ol style='list-style-position:inside;'>

改变前两行是有效的。将text-align属性设置为'center'会使容器中的内部居中。 “列表样式位置：内;”代码使列表样式（1.，2。等）出现在正常流程中，以便它们也居中。

注意：text-align将您的内容集中在容器中间。也就是说，如果您想在页面中间找到您的内容，您的容器应该是100％宽度。

另请注意，使用css时，如果您在其他表单和列表中使用它，内部或外部样式将更好，而不是内联样式（在上面的代码中使用）。

Result

Ways to insert css

How to create centered ordered list with HTML/CSS?

在页面中央显示单选按钮

2 个答案: