title: Make a group of buttons fill the whole width of the parent div
body: <p>I have a small panel with a width of <code>360px</code>. At the top of the panel, there is a navigation bar consisting of currently 3 buttons (the number should not matter though). I want the buttons to fill out the whole width of the div and take up more or less space depending on the length of the word inside. Currently, I only know how to set the width of the buttons to a value, but then if I add a button the values would need to be changed manually.</p>
  
  <p><img src="https://i.stack.imgur.com/XsNmh.png" alt="what it currently looks like"></p>
  
  <p>this is what I have now, but obviously it looks horrible. How can I make the first button less wide, the second button wider and have all three buttons together take up the whole width of the panel?</p>
  
  <p>Here is my code:</p>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;TEST&lt;/title&gt;
      &lt;link type="text/css" rel="stylesheet" href="test.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="panel"&gt;
          &lt;ul class="nav"&gt;
              &lt;li class="buttons"&gt;SHORT&lt;/li&gt;
              &lt;li class="buttons"&gt;LOOOOOOOOOOONG&lt;/li&gt;
              &lt;li class="buttons"&gt;...&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.panel {
      background-color: grey;
      width: 360px;
      height: 600px;
      position: relative;
      border: 1px solid black;
  }
  
  .nav {
      padding: 0;
      margin: 0;
  }
  
  .buttons {
      float: left;
      display: block;
      padding: 0px 20px;
      height: 40px;
      width: 60px;
      background-color: #666666;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      text-align: center;
      line-height: 40px;
  }
  </code></pre>