設置導航列表項目粘在一起

假設我有這樣的導航欄設置導航列表項目粘在一起

<div id = "nav"> 
     <a class = "menus" href = "#">Home</a> 
     <a class = "menus" href = "#">Archive</a> 
     <a class = "menus" href = "#">Blog</a> 
     <a class = "menus" href = "#">Lab</a> 
     <a class = "menus" href = "#">About</a> 
     </div>

而且我有這樣的CSS規則

#nav{position:absolute; top:20%;} 
.menus{border:1px solid black;} 
.menus:hover{background-color: pink;}

我將如何設置每個項目粘在一起？在給定的輸出中每個導航項目之間總是有一個間距。我將如何將它們放在一起？

來源

2012-02-21 KyelJmD

有幾種方法，但最簡單的將是float的元素。

#nav a { 
    float: left; 
}

jsFiddle。

只要不繼承未發佈的其他樣式，就應該這樣做。

問題是a元素之間的空白被渲染爲空間。渲染時，瀏覽器會將多個空格摺疊爲一個空格。

jsFiddle。

來源

2012-02-21 13:06:01 alex

您發佈的規則不起作用。 – KyelJmD 2012-02-21 13:09:06

@KyelJmD現在再試一次:) – alex 2012-02-21 13:11:24

它終於奏效了，但出於好奇，這是你創建導航欄的正確方法嗎？ – KyelJmD 2012-02-21 13:13:13

這樣做對你。菜單類

.menus 
{ 
    display:block; 
    float:left; 
}

檢查：http://jsfiddle.net/GgsDv/1/

來源

2012-02-21 13:14:27 Jack

我刪除了邊框適用如果你需要的話。 – Jack 2012-02-21 13:18:42

'float'自動使元素塊級別，所以明確定義它是沒有必要的。 – alex 2012-02-21 13:19:42

有時它不一樣，這就是爲什麼我用這個。雖然你是100％正確的，我承認:) – Jack 2012-02-21 13:21:20

你的項目之間看到的空間是您在HTML代碼中的每個<a>元素之後提出了新線的結果。因此，將所有鏈接放在一行中將以最直接的方式解決問題：

<div id = "nav"> 
    <a class = "menus" href = "#">Home</a><a class = "menus" href = "#">Archive</a><a class = "menus" href = "#">Blog</a><a class = "menus" href = "#">Lab</a><a class = "menus" href = "#">About</a> 
</div>

來源

2012-02-21 13:25:04

設置導航列表項目粘在一起

回答

相關問題