显示问题：内联块和宽度

Question

我需要将<li>个元素显示在一行中。它们的宽度应平均分配（如果有3个<li>元素，则宽度应为100％/ 3）。我写了下面的html代码：

    <ul>
      <li class="active" style="width: calc(100%/3);">HH</li>  
      <li style="width: calc(100%/3);">JJ</li> 
      <li style="width: calc(100%/3);">II</li>
    </ul>

css如下：

    <style>

    li {
    display: inline-block;
    }

    ul {
    padding: 0 0 0 0;
    margin: 0px 0px 0px 0px;
    }

    </style>

但是页面看起来像这样：

第三个元素总是下降。让我知道如何解决此问题。