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 つの単語の上にマウスを移動すると、1 ピクセルの小さなギャップがあります。このギャップを埋めたいのですが、どうすればいいですか？

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

何が欲しいのかわからない。ただし、パディングを気にしない場合は、スパンにパディングトップを追加できます。スペースを消費します。

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 に答える