html - 如何将 html 中的表单居中并保持问题对齐？

Question

我有一个快速的问题，我已经创建了

<style type="text/css"> 
      .container {
       width: 100%;
      clear: both;
       text-align:center;

}
.container input {
    width: 2%;
    clear: both;

}
</style>

将我计划执行的表单选项居中。它有效。我在中间有中心的圆形气泡，但是当我尝试添加名称时，“圆形复选标记”不再对齐。有没有一种方法可以解决这个问题而不用乱用

<Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()>Whatever<BR>

我附上了图片链接，以便于理解。

Answer 1

在元素符号周围添加一个 div 并使其成为 text-align:left; margin :0 自动 并从 input

中删除 width:2%

.form{
    text-align:left; 
    margin:0 auto;
    display:inline-block
}
.container input {
    clear: both;
}

DEMO