简单的间距CSS

Question

我为我的网站设计了一个导航栏;你可以在http://jsfiddle.net/ToddStyles/D2tZH/看到它。

我会用什么CSS来改变它们之间的间距？我使用了无序列表来创建它并将display更改为inline。

Answer 1

当您以内联方式显示元素时，HTML会将任何空格分析为空格键字符。因此，您可以注释掉列表项之间的空格，即：

<li>...</li><!--
--><li>...</li>

或者，将它们显示为块级元素并浮动它们：

ul {
    overflow: hidden; /* To prevent collapse */
}
ul li {
    display: block;
    float: left;
}

---

关于你发布的小提琴，你错误地使用了<img>标签。它是自动关闭的，不应该用来嵌套任何东西。

p / s：请不要使用链接缩短器，因为SO会阻止您因缺少代码而发布Fiddle链接。该规则有一个原因 - 为我们提供代码可以提供您的问题上下文。

Answer 2

如果您想增加宽度，可以轻松地将左边距应用于连续的<li>：

#navbar li + li {
    margin-left: 0.2em;
}

Here’s your fiddle back.我修复它以使用inline-block使布局在不可避免地包裹在较小的屏幕上时减少。并且考虑到我们无法通过互联网在您的计算机上看到图像。