0

我有这个代码：

<div id="navigation" class="blueColor">
      <ul id="TopMenu">
            <li><a  href="../src/projects.aspx">Projects<span class="subDetails blueColor">ARCHITECTURAL PROJECTS SUCH AS BUILDINGS, MASTER PLANS ETC.</span></a></li>  
            <li><a  href="../src/media.aspx">Media<span class="subDetails blueColor">DRAWINGS, PHOTOS, FILMS, NEWSPAPER CLIPPINGS ETC. THAT EXPLAIN THE \"PROJECTS\" AND CAPTURE THEIR LARGER CULTURAL BACKGROUND</span></a></li>              
      </ul>
</div>

这个css风格：

    #logo #navigation
    {
        float:left;
        width: 255px;
        font:35px Arial;
    }

    #logo #navigation li span.subDetails{
      float:left;
      font:10px Arial;
      text-transform:uppercase;
      padding-top:4px;
      width:140px;
      opacity: 0.2;
    }

    ul#TopMenu{
     position:absolute;
     margin-top:6px
    }
    #logo #navigation ul:first-child{
      margin-left:55px;
    }
    #logo #navigation li{
      margin-left:0px;
      width:167px;
      float:left;
    }

如果您将鼠标移到 Foo 和 Bar 这 2 个单词上，则会出现 1px 的小间隙。我想缩小这个差距，我该怎么做？

4

2 回答 2

2

添加：

line-height: 110%;

到跨度 CSS：

span { 
    width:100px;
    background:blue;
    font-size:30px;
    color:white; 
    text-align:center;
    line-height: 110%;
}
li{
    width:20px;

}

http://jsfiddle.net/RWPNE/

编辑：我们发现真正的 HTML 与原始问题不同，因此解决方案是margin-top: -1px;

于 2012-09-26T09:27:31.743 回答
0

我不确定你想要什么。但是，如果您不介意填充，您可以在跨度中添加一个 padding-top，它会占用空间：

span { 
     width:100px;
     background:blue;
     font-size:30px;
     color:white; 
     text-align:center;
     padding-top:1px;
}

li{
    width:20px;
}
于 2012-09-26T09:46:13.123 回答