Question

我正试图将Radio Button置于其Label Text下方。这有点类似于this question。但区别在于我的单选按钮，其标签在运行时从C#呈现。所以它被渲染为，

<tr>
 <td>
<input type="radio" name="radio" id="my_radio_button_id" />
<label for="my_radio_button_id">My Label</label>
 </td>
</tr>
<tr>
 ...    
</tr>

所以RadioButton首先呈现，然后Label，这就是为什么我不能使用给定答案来解决该问题。因此CSS尝试了很多，但无法提出任何适用的CSS。

所以，据我所知，我可以使用双向

来实现这一目标

使用jquery操作渲染的Html。
覆盖RenderContents方法以根据需要呈现数据。

但是我想知道是否有任何方法只使用CSS（或者使用jquery / javascript）。所以我不必经历上述方法之一。

如果出现混淆，请随意发表评论。

Answer 1

Flexbox可以做到这一点：

Flexbox Suppport是IE10及以上

td {
  display: flex;
  border: 1px solid grey;
  padding: .25em;
  flex-direction: column-reverse;
  align-items: center;
}

<table>
  <tr>
    <td>
      <input type="radio" name="radio" id="my_radio_button_id" />
      <label for="my_radio_button_id">My Label</label>
    </td>
  </tr>
  <tr>
</table>

Answer 2

如果您想要css解决方案，那么您可以尝试这样的事情。

.r{
    top: 21px;
    position: absolute;
    left: 20px;
}
.rp{
   width:90px;
   position:relative;
}

<div class="rp">
  <input type="radio" name="radio" id="my_radio_button_id" class="r"/>
  <label for="my_radio_button_id" class="l">My Label</label>
</div>

Answer 3

酷！享受

＆＃13;

.checkboxgroup {
    float: left;
    width: 100%;
    text-align: center;
}
.checkboxgroup label {
    float: left;
    width: 100%;
    margin-top: -20px;
    margin-bottom: 30px;
}
.checkboxgroup [type="radio"] {
    position: relative;
    top: 15px;
}

＆＃13;

  <div class="checkboxgroup">    
    <input type="radio" name="radio" id="my_radio_button_id1" />
      <label for="my_radio_button_id1">My Label1</label>
  </div>
  <div class="checkboxgroup">    
    <input type="radio" name="radio" id="my_radio_button_id2" />
      <label for="my_radio_button_id2">My Label2</label>
  </div>
  <div class="checkboxgroup">    
    <input type="radio" name="radio" id="my_radio_button_id3" />
      <label for="my_radio_button_id3">My Label3</label>
  </div>

＆＃13;

工作jsfiddle

标签下方的中心单选按钮？

3 个答案: