需要帮助将表单与 CSS 对齐答案

【问题标题】：Need help aligning form with CSS需要帮助将表单与 CSS 对齐
【发布时间】：2013-01-27 10:26:04
【问题描述】：

嘿，我有一个非常简单的问题，但我不太确定如何在不使用 HTML 表格的情况下实现这一点。基本上我想要的是标签在左边，右边有 3 个单选按钮。问题是，我希望每个单独的单选按钮垂直对齐。

例如：

标签 - 选择 1
..........- 选择 2
..........- 选择 3

我使用的HTML结构如下：

<label for="radio1">Label</label>
<input type="radio" name="radio1"> <span class="form-span">Option 1</span>
<input type="radio" name="radio1"> <span class="form-span">Option 2</span>
<input type="radio" name="radio1"> <span class="form-span">Option 3</span>

谁能帮我正确对齐表格？

谢谢:)

编辑

我找到了一个非常简单的解决方案，并且想知道它是否可以接受：您能否告诉我根据 HTML 标准它是否可以接受？

<label for="radio1">Label</label>
<span class="form-span"><input type="radio" name="radio1"> <span class="form-label">Option 1</span></span>
<span class="form-span"><input type="radio" name="radio1"> <span class="form-label">Option 2</span></span>

和 CSS：

.form-span {display:block}

【问题讨论】：

标签： css forms alignment

【解决方案1】：

最简单的方法是将所有内容包装在一个 div 中：

<div class="container">
   <label for="radio1">Label</label>
   <input type="radio" name="radio1"> <span class="form-span">Option 1</span>
   <input type="radio" name="radio1"> <span class="form-span">Option 2</span>
   <input type="radio" name="radio1"> <span class="form-span">Option 3</span>
</div>

然后添加以下 CSS：

   .container{height:200px;}
   label{float:left; height:100%;}
   input{float:left;}
   .form-span{display:block;}

查看此 jsFiddle 以查看实际示例。

【讨论】：

【解决方案2】：

HTML

<label for="radio1">Label</label>
<div id="parentDiv">
<input type="radio" name="radio1"> <span class="form-span">Option 1</span>
<input type="radio" name="radio1"> <span class="form-span">Option 2</span>
<input type="radio" name="radio1"> <span class="form-span">Option 3</span>
</div>

CSS

#parentDiv, label, input, span {
   float:left;
}

input {
   clear:both;
   margin-left:5px;
}

span {
   margin-left:5px;
}

检查一下：http://jsfiddle.net/gNHB7/

【讨论】：