jquery - iCheck 库：CSS 样式问题

Question

我将iCheck库用于几个单选按钮。我希望按钮及其标签全部显示在同一行（请参阅此处的 jsFiddle ），但无法正确设置元素的样式。

问题是（我认为）iCheck“用一个 div 包装每个输入，它可以由您自定义或使用其中一种可用的皮肤”（引自iCheck页面的“简单用法”部分）。

我试过的

-- 仅覆盖库 CSS 中的 display 属性，如下所示：

.iradio_flat-orange { 显示：内联！重要；}

结果 - 单选框完全消失了。

-- 将标签包裹在一个单一的<span style="display: inline">

结果 - 没有变化，单选按钮按 jsFiddle 显示。

有谁知道如何适当地设置单选按钮的样式？

Answer 1

您可以使用ul lilist 让它工作，包装你的inputand 并label使用li它设置样式display: inline-block;

看这个演示

HTML

<p>Are you sure you want to have your details removed from our marketing list?</p>
<ul>
    <li>
        <input type="radio" name="iCheck">
        <label>Yes</label>
    </li>
    <li>
        <input type="radio" name="iCheck">
        <label>No</label>
    </li>

CSS

ul {
    list-style:none;
}
ul li {
    display: inline-block;
    margin-left: 15px;
}