css - タブの自動幅と同じ寸法の水平メニュー

Question

自動 (100%) 幅の水平メニューを作成したいと思います。

私のCSS

.horizontal {
  width: 100%;
}

.horizontal ul {
  display: table;
  width: 100%
}

.horizontal li {
  display: table-cell;
}

.horizontal li a {
  height: 30px;
  display: block;
  border: 1px solid #aaa;
  text-align: center;
  padding: 4px;
  margin: 0 2px;
  background: #ccc;
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px;
}

私のHTML

<div class="horizontal">
<ul>
    <li><a href="#">Long Item</a></li>
    <li><a href="#">Short Item</a></li>
    <li><a href="#">Really Long Item</a></li>
    <li><a href="#">Nav Item</a></li>
    <li><a href="#">Some Other Link</a></li>
</ul>
</div>

私の問題は、「タブ」(a 要素) の幅を 100% 維持して同じサイズにすることです。

そうすることは可能でしょうか？どうすればこれを行うことができますか？ありがとう