無法讓我固定到頂部導航彼此相鄰

我已經閱讀了近50篇關於如何使用html和css獲取div或任何相鄰內容的文章，但我根本無法找到我所做的錯誤。無法讓我固定到頂部導航彼此相鄰

我的HTML看起來像這樣：

<!-- Navigation --> 
    <nav> 
     <ul> 
      <li> 
       <a href="#index">aaaaaa</img></a> 
      </li> 

      <li> 
       <a href="#over">bbbbbb</a> 
      </li> 

      <li> 
       <a href="#muziek">cccccc</a> 
      </li> 

      <li> 
       <a href="#gigs">dddddd</a> 
      </li> 

      <li> 
       <a href="#contact">eeeeee</a> 
      </li> 
     </ul> 
    </nav>

而CSS是這樣的：

nav { 
    position:fixed; 
    z-index: 100; 
    top:0; 
    left:0; 
    background-color: rgba(0,0,0,0.7); 
    width: 100%; 
    height: 58px; 
} 

ul { 
    list-style-type: none; 
    } 

li { 
    float: left; 
    display: inline-block; 
} 

a { 
    position:fixed; 
    top: 0; 
    color: #FFFFFF; 
    text-decoration: none; 
    margin-left: 10%; 
    }

請注意，我的導航欄，裏面的鏈接都大感迷惑頂部。現在所有的鏈接都堆疊在我想要第一個鏈接的地方。接下來，我希望鏈接彼此相鄰，而不是彼此相鄰。任何幫助將是巨大的:)

親切的問候

來源

2014-11-25 Frank van Dijke

一種解決方案是從a元素刪除position: fixed。同時刪除float: left從li元素（display: inline-block就夠了）：

nav { 
 
    position: fixed; 
 
    z-index: 100; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    width: 100%; 
 
    height: 58px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: inline-block; 
 
} 
 
a { 
 
    top: 0; 
 
    color: #FFFFFF; 
 
    text-decoration: none; 
 
    margin-left: 10%; 
 
}

<!-- Navigation --> 
 
<nav> 
 
    <ul> 
 
    <li> <a href="#index">aaaaaa</a> 
 

 
    </li> 
 
    <li> <a href="#over">bbbbbb</a> 
 

 
    </li> 
 
    <li> <a href="#muziek">cccccc</a> 
 

 
    </li> 
 
    <li> <a href="#gigs">dddddd</a> 
 

 
    </li> 
 
    <li> <a href="#contact">eeeeee</a> 
 

 
    </li> 
 
    </ul> 
 
</nav>

來源

2014-11-25 13:53:44

這工作！我知道雙重定位是奇怪的哈哈。謝謝！ – 2014-11-25 14:00:11

不客氣:)請不要忘記標記答案是正確的。 – 2014-11-25 14:01:41

@Frank如果答案有效，請點擊答案投票數下面的複選標記（用戶稱此操作*接受答案*或*標記答案爲正確*）。 – nicael 2014-11-25 15:51:58

一旦加入position:fixed到包頭本身，你並不需要添加任何地方了。添加position:fixed使頭的子元素相對於頭的所有位置。由於標題已修復，因此您不需要再爲每個孩子修復一次，因爲position:fixed會將元素相對於身體進行修復。這就是爲什麼你所有的鏈接層疊在一起。

來源

2014-11-25 13:55:27 nicael

無法讓我固定到頂部導航彼此相鄰

回答

相關問題