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

请找到下面的代码，这将是必要的。

CSS：

.container, .container p {
     width: 100%;
     text-align:center;
}
.container p { padding:0 0 5px 0; }
.container input {
    width: 2%;
    margin:0 5px 0 0;
}

HTML：

<div class="container">
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p>
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p>
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p>
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p>
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p>
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p>
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p>
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p>
</div>

Answer 2

在子弹周围添加一个 div 并制作它text-align:left; margin:0 auto 并width:2%从input

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

演示