title: html display inline property and make two check box in the same row
body: <p>I am a newbie to Html and currently I have some problem playing around with <code>display</code> style:</p>
  
  <p>I would like to create two checkbox in the same line with one label in front of each, however, with the following syntax, my checkbox will always go vertical (one on top of the other). </p>
  
  <pre><code>&lt;div&gt;
      &lt;label&gt;&lt;/label&gt;
      &lt;div&gt;&lt;input type='checkbox'&gt;&lt;/div&gt;
      &lt;label&gt;&lt;/label&gt;
      &lt;div&gt;&lt;input type='checkbox'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I understand that there display:inline can solve this problem. But as you can see, in the following code, I have several <code>&lt;div&gt;</code> element, I tried to add <code>display:inline</code> into all the elements in the outer <code>&lt;div&gt;</code>, but it is not working. I am not entirely sure what is going wrong. Maybe I miss something ?</p>
  
  <p>The other thing is that what if I want to make them both in the same line and also float to the left, should I just add a float:left to each elements in the outer <code>&lt;div&gt;</code>? It seems very inefficient since there maybe quite a lot elements in the outer <code>&lt;div&gt;</code>.</p>
  
  <p>Any help or hint will be appreciated ~</p>