Question

嘿，我有一个非常简单的问题，但我不确定如何在不使用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}

Answer 1

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/

Answer 2

最简单的方法是将所有内容包装在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 以查看实时示例。

需要帮助将表单与CSS对齐

2 个答案: