什麼是佔用網頁空間？

我有五個鏈接，彼此相鄰，雖然它們設置爲20％的寬度，但最後一個鏈接到下一行。但是，當我將其設置爲19.5％時，沒關係。我確定我爲body，鏈接和所有包含的元素設置了填充和邊距爲0.儘管這不是一個主要問題，但有關這方面的任何信息都將不勝感激。什麼是佔用網頁空間？

下面是HTML：

<div id="top"> 
    <img src="someimage" /> 
    <nav id="nav"> 
     <a href="link1.html">LINK1</a> 
     <a href="link2.html">LINK2</a> 
     <a href="link3.html">LINK3</a> 
     <a href="link4.html">LINK4</a> 
     <a href="link5.html">LINK5</a> 
    </nav> 
</div>

而CSS：

body { 
    background-color: white; 
    margin: 0; 
    padding: 0; 
} 
#top { 
    background-color: #AAAAAA; 
    height: 50px; 
} 
#nav > a { 
    display:inline-block; 
    height: 25px; 
    width: 19.5%; 
    background-color: #AAAAAA; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    text-decoration: none; 
    color: #222222; 
}

感謝您的答案。我在標籤之間添加評論，並且工作正常。

來源

2013-08-07 Lambda Ninja

它會自行排除，如果你把img顯示：塊;？ – allen213

[如何刪除內嵌塊元素之間的空間？]的可能重複（http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements） – Pascal

每條鏈接之間的換行符轉換爲空格。這是正在添加的寬度。

你可以寫在一行中的所有<a>標籤，讓它們漂浮或它們之間添加註釋，像這樣：

<nav id="nav"> 
    <a href="link1.html">LINK1</a><!-- 
    --><a href="link2.html">LINK2</a><!-- 
    --><a href="link3.html">LINK3</a><!-- 
    --><a href="link4.html">LINK4</a><!-- 
    --><a href="link5.html">LINK5</a> 
</nav>

來源

2013-08-07 13:10:31 Pascal

他所說的小提琴。 http://jsfiddle.net/KaKRA/1/。兩者都很好地工作。 – defaultNINJA

這是標籤之間的空白區域。 Check out this article你可以做的事情來對付它。

我的建議是簡單地把HTML全部放在一行上。閱讀起來很難，但呈現你想要的東西。

但是，最好的方法是建立一個構建步驟，將HTML縮小並自動清除所有內容。

來源

2013-08-07 13:09:12 freejosh

啊，你打敗了我！我會爲我的輝煌的''建議留下我的回答。 ;） – Pascal

他說的小提琴。 http://jsfiddle.net/KaKRA/ – defaultNINJA

這工作正常。 +1 –

inline-block有翻譯的問題行闖入空間，這可能會破壞你的佈局，我建議你使用花車，而不是：

#nav{ 
    overflow:hidden; 
} 

#nav > a { 
    float: left; 
    height: 25px; 
    width: 19.5%; 
    background-color: #AAAAAA; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    text-decoration: none; 
    color: #222222; 
}

來源

2013-08-07 13:15:51 Tomer

最喜歡這個答案最好。純CSS修復，沒有HTML標記操作。因爲我討厭'inline-block'，所以我會選擇這個。 http://jsfiddle.net/KaKRA/3/ – defaultNINJA

什麼是佔用網頁空間？

回答

相關問題