控制内联列表之间的空间

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

如果我将其构建为居中导航，我会将inline: block应用于列表项，然后使用边距来定义它们之间的间距。

请参阅此jsFiddle

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

Answer 2

修复只是将宽度从使用百分比更改为使用固定像素宽度。