New line only on complete list item

HTML & CSS
1

OOPS – figured it out. (Only needed to change the li display: inline; to display: inline-block;)

But here is the original post.

Each of the 17 list items in my php generated list contains an input element and a label element (see code below) that I display: inline;

In Google Chrome (Version 33.0.1750.117 m), resizing the screen often causes a new line to break between the input and the label (which also disrupts the columnar alignment). What I prefer is that the entire list item would start a new line.

                    <fieldset id="countsset">
                        <legend>Counts</legend>
                        <ol>
                            <li>
                                <input id='aqua' name='aqua' type='text'  class='digits' value='0' />
                                <label for='aqua' class='aqua'>:&nbsp;aqua</label>
                            </li>
                            <li>
                                <input id='black' name='black' type='text'  class='digits' value='0' />
                                <label for='black' class='black'>:&nbsp;black</label>
                            </li>
                            <li>

and so on
And here is the css snippet

        #countsset label {
            width: 5em;
            display: inline-block;
        }
        input {
            text-align: center;
            margin-left: 0.6em;
        }
        li {
            font-weight: bold;
            font-style: Ariel;
            font-size: 16px;
            list-style: none;
            display: inline;
        }

and so on.
I’m open to using float, but wonder if there isn’t something simpler.

Regards,

grNadpa