Question

所以我有这个问题并且导航在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 / LIst的第一条规则。摆脱默认格式：

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

JSFiddle捣乱：http://jsfiddle.net/TrueBlueAussie/4ctUx/

Answer 2

内联内容对空格敏感，因此元素之间会有空格。这通常是人们在希望元素彼此相邻排列时使用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将所有内容放在一行上。

html中的UL LI标签创建空白区域

3 个答案: