css - 简单间距 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：请不要因为缺少代码而阻止您发布 Fiddle 链接而使用链接缩短器。规则的存在是有原因的——为我们提供代码给你的问题上下文。

Answer 2

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

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

这是你的小提琴回来。inline-block当它不可避免地包裹在较小的屏幕上时，我修复了它以减少布局中断。请注意，我们无法通过 Internet 看到您计算机上的图像。