li 之间的导航栏空间答案

【问题标题】：Navigation bar space between lili 之间的导航栏空间
【发布时间】：2015-01-14 11:37:15
【问题描述】：

在第一个列表项和第二个列表项之间似乎有一个小空间。我怎样才能删除它？其余列表项之间没有间距。知道如何摆脱这种间距，因为它看起来非常糟糕。

.media {
    width: 140px;
    height: 140px;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: left;
    text-shadow: 3px 2px 3px #333333;
}

.media a {
    text-decoration: none;
    color: white;
    padding: 10px;
}

.media ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
}

.media li:hover {
    background-color: #CCCCCC;

}

.media li {
    width: 150px;
    text-align: center;
    height: 50px;
    background-color: grey;
}

这里是 div：

<div class="media">
    <ul>
        <li><a href="index.html">Home</a></li>
        <ul><li><a href="aboutus.html">About Us</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
    </ul>
</div>

【问题讨论】：

标签： html css navigation

【解决方案1】：

删除第二项之前的附加

。

【讨论】：

【解决方案2】：

那是因为你在它们之间有一个ulFiddle

.media {
    width: 140px;
    height: 140px;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: left;
    text-shadow: 3px 2px 3px #333333;
}

.media a {
    text-decoration: none;
    color: white;
    padding: 10px;
}

.media ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
}

.media li:hover {
    background-color: #CCCCCC;

}

.media li {
    width: 150px;
    text-align: center;
    height: 50px;
    background-color: grey;
}

<div class="media">
    <ul>
        <li><a href="index.html">Home</a></li>
     <li><a href="aboutus.html">About Us</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
    </ul>
</div>

【讨论】：

【解决方案3】：

您需要从 li 之间删除 ul。

【讨论】：

【解决方案4】：

您的 HTML 在您的 <li>s 之一的开头包含一个杂散的 <ul>。

删除它

<div class="media">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="aboutus.html">About Us</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
    </ul>
</div>

【讨论】：

【解决方案5】：

只需添加一个 css

.media>ul>ul { 填充顶部：0； }

	.media {
    width: 140px;
    height: 140px;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: left;
    text-shadow: 3px 2px 3px #333333;
}

.media a {
    text-decoration: none;
    color: white;
    padding: 10px;
}

.media ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
}

.media li:hover {
    background-color: #CCCCCC;

}

.media li {
    width: 150px;
    text-align: center;
    height: 50px;
    background-color: grey;
}
.media>ul>ul {
padding-top: 0;
}

<div class="media">
    <ul>
        <li><a href="index.html">Home</a></li>
        <ul><li><a href="aboutus.html">About Us</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
    </ul>
</div>

【讨论】：

【解决方案6】：

您有两种方法可以做到这一点。
您可以从索引链接中删除要么在您的 css 代码中使用“margin”，例如 {margin:-5px;} 。

【讨论】：