title: CSS: Get form label to display on top of form element (jsfiddle)
body: <p>I am trying to get the form label to display on top of each form element. I have the <a href="http://jsfiddle.net/LUgg5/1/" rel="nofollow">jsfiddle</a> where this is done.</p>
  
  <p>The problem is, how do I get more than one form element per line while keeping its label directly above it? </p>
  
  <p>You can see in my example how I have "city, state, zip" all on the same line, but because of <code>display: block</code> in my CSS, it is breaking them up onto separate lines.</p>
  
  <pre><code>label { 
      font-weight:bold;
      display: block;
  }
  
  &lt;form&gt;
  
      &lt;label for="name"&gt;Name&lt;/label&gt;
      &lt;input type="text" name="name" /&gt;&lt;br /&gt;
  
      &lt;label for="email"&gt;Email&lt;/label&gt;
      &lt;input type="text" name="email" /&gt;&lt;br /&gt;
  
      &lt;label for="city"&gt;City&lt;/label&gt;
      &lt;input type="text" name="city" /&gt; 
  
      &lt;label for="state"&gt;State&lt;/label&gt;
      &lt;input type="text" name="state" /&gt; 
  
      &lt;label for="zip"&gt;Zip&lt;/label&gt;
      &lt;input type="text" name="zip" /&gt;&lt;br /&gt;
  
      &lt;label for="last"&gt;Last&lt;/label&gt;
      &lt;input type="text" name="last" /&gt;
  
  &lt;/form&gt; 
  </code></pre>