HTML中的UL LI标签会创建空白

Question

所以我有这个ul的li's，并且nav在CSS中更改为内联，但是由于某些原因，当我将那几行放在页面顶部时，它们会创建空白区域（例如3-4行），我无法摆脱它

<ul id="nav">
<li><span style="position: relative; top: -19px;"><a href="champions.php">Champions</a></span></li>
<li><span style="position: relative; top: -19px;"><a href="items.php">Items</a></span></li>
<li><span style="position: relative; top: -19px;"><a href="changes.php">Changes</a></span></li>
</ul>

Answer 1

UL / LI的第一条规则。 摆脱默认格式：

#nav.ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

JSFiddle搞砸了： http : //jsfiddle.net/TrueBlueAussie/4ctUx/

Answer 2

内联内容对空格敏感，因此元素之间将留有空格。 这就是为什么人们在希望元素彼此inline时会使用float而不是inline原因。

这是一个简化的示例，说明我认为您的问题是：

http://jsfiddle.net/rH24P/

我将其更改为使用float: left代替：

http://jsfiddle.net/rH24P/1/

更新的CSS：

ul {
    list-style: none;
}
li {
    background: #ccc;
    float: left;
}

Answer 3

我认为您正在寻找的是这样的http://jsfiddle.net/4QR2v/

删除内联样式，而改用以下CSS：

#nav{
    margin:0;
    padding:0;
    list-style: none;
}

#nav li{
    display:inline;
}

margin:0和padding:0删除列表上的默认格式（这可能是您指的空白）。 display:inline将所有内容都放在一行上。