Steuerbereich zwischen der Inline-Liste

Question

Der Versuch, oben auf der Seite ein Navigationsmenü zu erstellen, aber die Bilder sind zu weit voneinander entfernt und werden dann umgebrochen. Wie bringe ich sie näher zusammen?

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

Das Update war einfach die Breite ändert Prozentsatz mit fester Pixelbreite zu verwenden.

Answer 2

Wenn ich dies als eine zentrierte Navigation bauen würde, würde ich inline: block auf die Listenelemente anwenden und dann eine Marge verwenden, um Definieren Sie den Abstand zwischen ihnen.

Sehen Sie diese jsFiddle

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