title: How to make child elements bisects the width of their parent element
body: <p>I wrote a navigation bar like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.site-nav ul {
    margin: 0;
    background-color: #09C;
    line-height: 52px;
  }
  .site-nav li {
    display: inline-block;
    font-size: 14px;
  }
  .site-nav a {
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="site-nav"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;首页&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;1&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;2&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;3&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I need each <code>&lt;li&gt;</code> tag bisects the width of <code>ul</code> (it's parent). If the count of <code>&lt;li&gt;</code> is known, I can simply give an percentage to <code>&lt;li&gt;</code>, 
  in this case:</p>
  
  <pre><code>.site-nav li {
    width: 25%;
    display: inline-block;
    font-size: 14px;
  }
  </code></pre>
  
  <p>However, the <code>&lt;li&gt;</code> is dynamically generated ( I use <a href="https://www.asp.net/web-pages/overview/getting-started/introducing-razor-syntax-c" rel="nofollow noreferrer">razor</a>), so I don't know how many <code>&lt;li&gt;</code> will generated.</p>
  
  <p>So is there some way to achieve this?</p>