Question

我在html页面上有一个垂直的UL列表，里面有一个子列表。在子列表的最后，它有一个不必要的差距，就像一个换行符，虽然我似乎无法在我的css或html中找到任何会导致它的东西（我试图让它消失的尝试不是工作得非常好。）

这就是它的样子;

1. Item
2. Item
   1. Sub Item
   2. Sub Item

3. Item
4. Item

我的HTML代码：

<ul class="fic">
  <li class="fic"><a href="">item</li>
  <li class="fic"><a href="">item
    <ul class="fic">
      <li class="fic">item</li>
      <li class="fic">item</li>
    </ul>
  </li>
  <li class="fic">item</li>
  <li class="fic">item</li>
  <li class="fic">item</li>
  <li class="fic">item</li>
  <li class="fic">item</li>
  <li class="fic">item</li>
  <li class="fic">item</li>
  <li class="fic">item
    <ul class="fic">
      <li class="fic">item</li>
    </ul></li>
</ul>

我尝试使用的css代码;

.fic ul {
    padding: 0px;
    margin: 0px;
}

由于我的模板带有导航栏中使用的ul的菜单代码，所以就是这样;

#menu ul {
    display: block;
    width: 778px;
    margin: 0em auto;
    list-style: none;
    padding-left: 2.5em;
}

#menu li {
    display: inline;
}

#menu li a {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
    padding: 0.25em 0.75em 0.25em 0.75em;
}

#menu li a:hover {
    background: #342117 url('images/hover.gif') top left repeat-x;
    color: #fffdc6;
}

导航菜单的html代码;

<div id="menu">
    <ul>
        <li class="first"><a href="/">Home</a></li>
        <li><a href="fanart.html">Fan Art</a></li>
        <li><a href="fanfic.html">Fan Fiction</a></li>
        <li><a href="fanvid.html">Fan Videos</a></li>
        <li><a href="other.html">Other</a></li>
        <li><a href="forum.html">Forum</a></li>
    </ul>
</div>

帮助将不胜感激，谢谢。

Answer 1

菜单样式是罪魁祸首，需要完整的代码

列表末尾的垂直间隙？

1 个答案: