インラインリスト間のスペースを制御する

Question

ページの上部にナビゲーションメニューを作成しようとしましたが、イメージが離れすぎて離れすぎてしまいます。どうやって一緒に近づけるの？

CSS：

.weddingMenuIcon{ 
     width:30%; 
    } 

HTML：

<ul class="list-inline"> 
    <li> 
     <img src="~/images/home.svg" class="img-responsive weddingMenuIcon" /> 
    </li> 
    <li> 
     <img src="~/images/home.svg" class="img-responsive weddingMenuIcon" /> 
    </li> 
    <li> 
     <img src="~/images/home.svg" class="img-responsive weddingMenuIcon" /> 
    </li> 
</ul> 

Answer 1

修正が単に固定ピクセル幅を使用してパーセンテージを使用してから、幅を変えた参照します。

Answer 2

私は、リスト項目にinline: blockを適用し、その後にマージンを使用する中心のナビゲーションとしてこれを構築していた場合それらの間の間隔を定義します。

このjsFiddle

.list-inline li { 
    display: inline-block; 
    margin: 0 40px; /* Items have 40px spacing between */ 
}