显示输入type="radio“内联样式-使用icheck-me类[icheck插件]

Question

我一直在尝试将输入单选类型内联对齐。但是我仍然不能使它们内联..它出现在下一行。

​

​

这是编码单元。

​

<tr>
    <td>Display on Homepage</td>
     <td>
         <div style="display: inline;">
             <label>
                  <input type="radio" class='icheck-me' name="show" value="Yes" data-skin="flat" data-color="orange" checked> Yes	
              </label>
              <label>
                  <input type="radio" id="radio-inline" class='icheck-me' name="show" value="No" data-skin="flat" data-color="grey"> No	
              </label>
          </div>
</tr>

​

Answer 1

试试这个-

<label class='box'>
              <input type="radio" class='icheck-me' name="show" value="Yes" data-skin="flat" data-color="orange" checked> Yes   

          </label>
          <label class='box'>
              <input type="radio" id="radio-inline" class='icheck-me' name="show" value="No" data-skin="flat" data-color="grey"> No 
          </label>

CSS：

.box{ display:inline-block; width: 50px;} .icheck-me{ display:inline-block; float:left;}

Answer 2

您也应该在标签上使用内联

<div>
    <label style="display: inline;">
        <input type="radio" class='icheck-me' name="show" value="Yes" data-skin="flat" data-color="orange" checked> Yes 
    </label>
    <label style="display: inline;">
        <input type="radio" id="radio-inline" class='icheck-me' name="show" value="No" data-skin="flat" data-color="grey"> No   
    </label>
</div>

这只是一个示例，不建议在样式属性中添加这些属性-应将其添加到新类或将display: inline;添加到icheck-me类

Answer 3

您可以使用display:block将单选按钮放在彼此的下面。此外，使用：‘style=“垂直对齐: top;"’将文本与单元格的右上角对齐

因此，您的代码将如下所示：

<tr>
  <td style="vertical-align: top;">Display on Homepage</td>
  <td>
  <div>
      <label>
      <input type="radio" class="icheck-me" name="show" value="Yes" data-skin="flat" data-color="orange" checked> Yes   
  </label>
  <label>
      <input type="radio" id="radio-inline" class="icheck-me" name="show" value="No" data-skin="flat" data-color="grey"> No 
  </label>
  </div>
  </td>
</tr>

和CSS：

.icheck-me{
  display:block;
  }

DEMO