title: How to spread elements horizontally evenly?
body: <p>I have a <code>div</code> container on my web page with fixed width and it contains form elements for logging in. Below these elements there are a submit button, forgotten password link etc.</p>
  
  <p>It happens the last line elements need fewer width than the box provides. How to spread them evenly? I don't want</p>
  
  <ul>
  <li>default</li>
  </ul>
  
  <pre>
  | A B C           |
  </pre>
  
  <ul>
  <li>centering the line like</li>
  </ul>
  
  <pre>
  |      A B C      |
  </pre>
  
  <ul>
  <li>nor table layout</li>
  </ul>
  
  <pre>
  |  A  |  B  |  C  |
  </pre>
  
  <p><br/>Instead I am looking for some CSS way to achieve:</p>
  
  <pre>
  |  A    B    C  |
  </pre>
  
  <p>That is:</p>
  
  <ul>
  <li>put about equal space between all elements</li>
  <li>center the whole thing to avoid the first or last  to the side</li>
  </ul>
  
  <p><strong>edit:</strong>
  <a href="https://stackoverflow.com/questions/4108726/how-to-spread-html-evenly-over-a-line/4108814#4108814">This answer</a> worked best. I created templates for 2 or 3 elements like this:</p>
  
  <pre>
  div.spread2evenly > div {
      display: inline-block;
      *display: inline; /* For IE7 */
      zoom: 1; /* Trigger hasLayout */
      width: 50%;
      text-align: center;
  }
  </pre>