Question

以下代码生成包含两个绿色项目的输出。在这些项目之间几乎没有空白区域（或任何背景颜色设置）。白色空间来自哪里以及如何摆脱它？我希望输出类似于FirstSecond，但它是First Second，其间有空格。

<head>
<style type="text/css">
ul {
    list-style-type: none;
    white-space: nowrap;
}
ul li {
    display: inline;
    background-color: #096;
}
</style>
</head>
<body>
<ul>
    <li>First</li>
    <li>Second</li>
</ul>
</body>the output

Answer 1

您可以尝试像li一样浮动ul li { float:left }：{{1}} ...它似乎删除了间距。示例：JsFiddle

Answer 2

添加浮动：左;样式ul li in将取消默认保证金

Answer 3

ul和li有一些默认的边距和填充。如果您不需要间隙或更小/更大的间隙，则需要重置此项。如果我没记错的话，我认为对于FF它的30px，但是从浏览器到浏览器的数量会有所不同。

css list display-inline - 保证金来自哪里？

3 个答案: