0

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

2 回答 2

0

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/

于 2013-01-27T10:59:22.340 回答
0

最简单的方法是将所有内容包装在一个 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来看看一个活生生的例子。

于 2013-01-27T12:28:46.413 回答