checkbox and label not inline CSS Magento form

Question

This is what is showing what ever css style I put

I really want to have this please help

<li><div class="wide checkbox-inline">
<label class="required" for="options[3]">Delivery Day  <em>*</em> </label>
<div class="input-box">
<ul class="options-list"><li><input type="checkbox" name="options[3][]" id="options_3_text_Sunday" class="checkbox" title="Sunday" value="Sunday"><label for="options_3_text_Sunday"> Sunday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Monday" class="checkbox" title="Monday" value="Monday"><label for="options_3_text_Monday"> Monday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Tuesday" class="checkbox" title="Tuesday" value="Tuesday"><label for="options_3_text_Tuesday"> Tuesday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Wednesday" class="checkbox" title="Wednesday" value="Wednesday"><label for="options_3_text_Wednesday"> Wednesday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Thursday" class="checkbox" title="Thursday" value="Thursday"><label for="options_3_text_Thursday"> Thursday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Friday" class="checkbox" title="Friday" value="Friday"><label for="options_3_text_Friday"> Friday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Saturday" class="checkbox validate-one-required-by-name" title="Saturday" value="Saturday"><label for="options_3_text_Saturday"> Saturday</label></li></ul>        </div>
 </div></li>

.checkboxes label {
    display: block;
    float: left;
    padding-right: 10px;
    white-space: nowrap;
}
.checkboxes input {
    vertical-align: middle;
}
.checkboxes label span {
    vertical-align: middle;
}

Answer 1

After you added the code, i took a closer look. Seems the problem is caused by use of the UL (unordered list). The list sums up all the list-items (LI's), which normally start on a new rule for every item. Normally this is what you want by adding a list, but in this case you don't want to sum up the checkboxes in a list.

To solve the problem the fast way, you can use this styling:

.options-list li{
  display: inline;
}

The better way is to leave out the < li >- and < ul >-tags in this case. Check this out for the working example: https://jsfiddle.net/crix/o1du23b3/

Hope this helps!