html中的UL LI标签创建空白空间

UL LI tags in html create blank space

本文关键字：创建 空白 空间 标签 LI 中的 UL html      更新时间：2023-09-26

所以我有了这个ul的li's在css中nav被改成了inline但是由于某些原因当我把这几行放在页面顶部的时候它们会产生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>

UL/LIs第一条规则。去掉默认格式:

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

JSFiddle乱搞:http://jsfiddle.net/TrueBlueAussie/4ctUx/

内联内容是空白敏感的，所以元素之间要有空格。这就是为什么当人们想让元素相邻排列时，他们会使用float而不是inline。

这里有一个简单的例子来说明我认为你的问题是:

http://jsfiddle.net/rH24P/

我将把它改为使用float: left:

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

更新CSS: 

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

我想你要找的是这样的东西http://jsfiddle.net/4QR2v/

删除你的内联样式，并使用以下CSS代替:

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

margin:0和padding:0删除列表上的默认格式(这可能是您所指的间隙)。display:inline将所有内容放在一行

相关文章：