Make a <ul> tag display on the same line as text

I'm trying to make a <ul> tag displ开发者_StackOverflow中文版ay inline with a line of text. here's the HTML.

<li>
  <input type="checkbox" id="449" value="Whats that?" class="checkbox"><label for="449">Whats that?</label>
  <ul class="449">
    <li>{...removed...}</li>
    <li>{...removed...}</li>
    <li>{...removed...}</li>
    <li>{...removed...}</li>
  </ul>
</li>

What it renders as now is this:

Whats that?
  Li element
  Li element
  Li element
  Li element

But I want it to render like this:

Whats that? Li element
            Li element
            Li element
            Li element

What CSS rules do i need to put into that <ul>? And nevermind that class name, it's for zany javascript purposes. Thank you!

Float them:

p, ul {
    float: left;
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
}

<p>Whats that?</p>
<ul>
    <li>Li element</li>
    <li>Li element</li>
    <li>Li element</li>
    <li>Li element</li>
</ul>

ul.449{
 display: inline-block;   
}

Will get it inline. The vertical alignment is a bit weird.

I suggest ul.449 { display:inline-table} but it will support ie8+. Another solution with cross browser support I suppose could be to float:left; all elements (input, label, ul) and add margin:0; the ul

First approach: http://jsbin.com/axako3/2

Second approach: http://jsbin.com/axako3/3