li之间的导航栏空间

Question

在第一个列表项和第二个列表项之间似乎有一个小空间。我该如何删除它？其余列表项之间没有间距。任何想法我怎么能摆脱那个间距因为它看起来非常糟糕。

.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>

Answer 1

删除其他＆lt; ul＆gt;在第二项之前。

Answer 2

这是因为您从Fiddle

之间开始ul

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你需要从li之间删除ul。

Answer 4

您的HTML在<ul>之一的开头包含一个迷路<li>。

只需删除它

<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>

Answer 5

只需添加一个CSS

.media＆gt; ul＆gt; ul { padding-top：0; }

＆＃13;

＆＃13;

	.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 6

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