In HTML5, how do I align multiple elements to appear on the same line in a list definition?
<p>I have the following HTML definition.
(I'm using Knockout)</p>
<pre><code>&lt;ul data-bind=&quot;foreach: itemList&quot;&gt;
   &lt;li&gt;
       &lt;span data-bind=&quot;text: displayName&quot;&gt;&lt;/span&gt;
       &lt;span class=&quot;right&quot; data-bind=&quot;text: measurement&quot;&gt;&lt;/span&gt;
       &lt;input type=&quot;checkbox&quot; /&gt;
   &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p><strong>I would like these to display aligned as the following</strong></p>
<pre><code>Item1                   measurement1  Checkbox1
Item2                   measurement2  Checkbox2
Item3                   measurement3  Checkbox3
</code></pre>
<p>I would like this to be aligned the following way:</p>
<blockquote>
<p>Column 1 is floated to the far left.</p>
<p>Column 3 (The input checkbox) is floated to the far right.</p>
<p>Column 2 is is on the far right, but to the left of Column3</p>
</blockquote>
<p>I've tried working with DIVs and the float/display attributes.</p>
<p>I haven't been able to achieve the desired visual behavior.</p>
<p>How would I accomplish this?</p>