jquery - iCheck 库 : CSS styling issue

Question

我正在使用 iCheck几个单选按钮的库。我希望按钮及其标签全部显示在同一行上(请参阅 jsFiddle here )，但无法适本地设置元素的样式。

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

我尝试过的

-- 仅覆盖库 CSS 中的显示属性，如下所示:

.iradio_flat-orange { display: inline !important; }

结果 - 单选框完全消失。

-- 将标签包装在一个 <span style="display: inline"> 中

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

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

Answer 1

你可以使用 ul li list 让它工作，用 li 包装你的 input 和 label 和使用 display: inline-block;

设置样式

See this Demo

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;
}