css - リスト追加時の自動幅

Question

margin:0 autoいくつかのリスト項目を含む単純なメニュー (を中心に) があります。現在、追加のリスト項目を追加するときに、メニューを同じ中央位置に維持しようとしています。これがフィドルプレイです

ul{
  list-style-type: none;
  background: red;
  margin:0 auto;
  width: 56%;
  max-width:600px

 }

ul li{

display: inline-block;
width: 100px;
background-color: #000;
color: #fff;

}

を追加liしulてラップし、中央に配置したい。

IE がサポートしていないので、フレックスボックスは使いたくありません:D

The problem is solved. Giving the ul {display:table} Thank you all,especially Coop !