縮小差距時，我有一個固定的寬度HTML

我有這樣的代碼：縮小差距時，我有一個固定的寬度HTML

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

如果你在2個字移動鼠標Foo和酒吧有是1px的小差距。我想縮小這個差距，我該怎麼做？

來源

2012-09-26 Andreas Lympouras

加上'白色空間：NOWRAP;'你李{...} http://jsfiddle.net/ssxQc/ – Sense

你在說什麼類型的差距 – sandeep

可能你可以在這裏放置一個截圖，突出你正在談論的GAP。 – RMN

地址：

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-26 09:27:31 David

是的，是正確的，但它仍然不適用於我的真實網頁。我認爲這個例子是一樣的。我更新了我的問題。 –

我看到了 - 嘗試在範圍上使用'margin-top：-1px;'，應該修復它。 – David

THX！這工作！「margin-top：-1px;」 –

我不確定你想要什麼。但是，如果你不介意，你可以添加填充頂到跨度墊襯，它佔用的空間：

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

li{ 
    width:20px; 
}

來源

2012-09-26 09:46:13 Kedume

對不起。你改變了這個例子。現在情況不一樣了:-( – Kedume

我試過了，但它不工作...... –

縮小差距時，我有一個固定的寬度HTML

回答

相關問題