list checkboxes displayed horizontal

Question

I have the following markup:-

<div class="fil hori now">
  <span class="label-new">
    <ul class="ngc">
      <li>
        <input class="any" id="any" name="any" type="checkbox"> 
        <label id="any" for="any">Any</label>
      </li>

      <li class="new-select">
        <input id="item1" name="item1" type="checkbox">
        <label id="item1" for="item1">item1</label>
      </li>

      <li class="new-select">
        <input id="item2" name="item2" type="checkbox">
        <label id="item2" for="item2">item2</label>
      </li>

      <li class="new-select">
        <input id="item3" name="item3" type="checkbox">
        <label id="item3" for="item3">item3</label>
      </li>
    </ul>

  </span>
</div>

How would I go about making the items list horizontal, but also so if I have new items, they simply go onto the next line at a specific width, rather than on one line?

Answer 1

First thing is your mark-up is totally wrong!

1. You cannot have <ul> inside <span>.
2. You can have only <li> inside <ul>.

To answer your query, it is just a simple CSS fix:

.new-select {
  display: inline-block;
}

Answer 2

A simple float: left property on new-select should do the trick.

.new-select {
    float: left;
}