内联列表之间的控制空间答案

【问题标题】：Control space between in-line list内联列表之间的控制空间
【发布时间】：2016-04-18 05:01:11
【问题描述】：

试图在页面顶部创建一个导航菜单，但图像之间的距离太远，然后它们会换行。我怎样才能让它们靠得更近？

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>

【问题讨论】：

实际上，我认为我们缺少其他样式化这种行为的 CSS。
请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

看到这个jsFiddle

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

【讨论】：

【解决方案2】：

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

【讨论】：