Whitespace with adjacent selectors

Question

I have a list of checkboxes and labels. Depending on the line item width, and the container wrap, the checkbox may end up on the previous line, with the label starting the 2nd line. I'd like for this to not happen, instead taking the checkbox with the label to the next line.

I attempted to use the ~ selector and I can reference the label this way (as denoted by the border) however the input is not affected which doesn't stop the line break from wrapping.

<ul>
<li>
    <input type="checkbox" />
    <label>AAAAAA</label>
</li>
 <li>
    <input type="checkbox" />
    <label>AAAAAA</label>
</li>
...
</ul>

Css

ul { list-style: none; }
ul li { display: inline; }
ul li input ~ label {
  white-space: nowrap;
  border: 1px solid #555;
}

Fiddle: http://jsfiddle.net/rd1hqjsq/

Answer 1

You may want to use inline-block instead of inline for the display property on the li items:

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

ul { list-style: none; }
ul li { display: inline-block; }

ul li input ~ label {
    white-space: nowrap;
    border: 1px solid #555;
}

<ul>
    <li>
        <input type="checkbox" />
        <label>AAAAAA</label>
    </li>
     <li>
        <input type="checkbox" />
        <label>AAAAAA</label>
    </li>
     <li>
        <input type="checkbox" />
        <label>AAAAAA</label>
    </li>
     <li>
        <input type="checkbox" />
        <label>AAAAAA</label>
    </li>
     <li>
        <input type="checkbox" />
        <label>AAAAAA</label>
    </li>
     <li>
        <input type="checkbox" />
        <label>AAAAAA</label>
    </li>
     <li>
        <input type="checkbox" />
        <label>AAAAAA</label>
    </li>
</ul>

---

If you use inline-block take in care that generates a white-space between items that you may need to remove. Read this article for more info:

Fighting Space Between Inline-block elements