title: What is a general way of equally spacing inline elements of the same type inside a div?
body: <p>I have </p>
  
  <pre><code>&lt;div class="outerdiv" id="navbar"&gt;
      &lt;form action="page1.html"&gt;&lt;input type="submit" value="Page 1"&gt;&lt;/form&gt;
      &lt;form action="page2.html"&gt;&lt;input type="submit" value="Page 2"&gt;&lt;/form&gt;
      &lt;form action="page3.html"&gt;&lt;input type="submit" value="Page 3"&gt;&lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I would like these 3 form elements to be equally spaced within the div that's wrapping them. The 3 form elements are of constant size that is small with respect to the div, so I want to keep a general CSS outline in case I need to add another form element in the future. I don't want to give separate IDs to each of the 3 elements and then float them appropriately, if I don't have to.</p>