iCheck library: CSS styling issue

Question

I'm using the iCheck library for a couple of radio buttons. I'd like the buttons and their labels to display all on the same line (see jsFiddle here), but am having trouble styling the elements appropriately.

The issue is (I think) that iCheck "wraps each input with a div, which may be customized by you or using one of the available skins" (quote taken from the 'Simple Usage' section of the iCheck page).

What I've tried

-- Overriding just the display property in the library's CSS as follows:

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

Result - the radio boxes disappear altogether.

-- Wrapping the labels in a single <span style="display: inline">

Result - no change, radio buttons display as per the jsFiddle.

Does anyone have an idea how I can style the radio buttons appropriately?

Answer 1

You can use ul li list to get it working, wrap your input and label with li and style it with 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;
}