爲什麼我的列表項目重疊？

Question

我希望我的列表項能夠彼此相鄰顯示，但由於某些原因，它們總是重疊。有人能告訴我如何解決這個問題嗎？

#background { 
 
    height: 1000px; 
 
    background-image: url("https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg"); 
 
    background-position: center center; 
 
    background-size: cover; 
 
} 
 

 
#menu { 
 
    background-color: white; 
 
    border: 2px solid grey; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    background-color: white; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding: 5px 10px 5px 10px; 
 
    border: 2px solid grey; 
 
    overflow: none; 
 
    position: fixed; 
 
    background-color: white; 
 
}

<div id="background"> 
 
    <div id="menu"> 
 
    <ul> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
     <li>Item 5</li> 
 
    </ul> 
 
    </div> 
 
</div>

預先感謝您！

Answer 1

您需要刪除的位置是：固定在「禮」元素，因爲如果你讓每一個'李'元素的位置固定，這會讓你的物品總是重疊。 可能是你可以嘗試更新您的「UL」和「禮」的元素風格類似這樣的代碼波紋管：

ul { 
    list-style: none; 
    position: fixed; 
} 

li { 
    display: inline-block; 
    padding: 5px 10px 5px 10px; 
    border: 2px solid grey; 
    overflow: none; 
    background-color: white; 
} 

Answer 2

這是因爲您已經爲li標籤定義了position: fixed。

#background { 
 
    height: 1000px; 
 
    background-image: url("https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg"); 
 
    background-position: center center; 
 
    background-size: cover; 
 
} 
 

 
#menu { 
 
    background-color: white; 
 
    border: 2px solid grey; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    background-color: white; 
 
} 
 

 
li { 
 
    display: inline; 
 
    padding: 5px 10px 5px 10px; 
 
    border: 2px solid grey; 
 
    overflow: none; 
 
    //position: fixed; 
 
    background-color: white; 
 
}

<div id="background"> 
 
      <div id="menu"> 
 
       <ul> 
 
        <li>Item 1</li> 
 
        <li>Item 2</li> 
 
        <li>Item 3</li> 
 
        <li>Item 4</li> 
 
        <li>Item 5</li>  
 
       </ul> 
 
      </div> 
 
     </div>

Answer 3

取出position: fixed。這會修復瀏覽器視口中的一個元素，並將其從流中移除。不是你想要的。

https://developer.mozilla.org/en-US/docs/Web/CSS/position

固定

該元件是從正常的文件流中去除;在頁面佈局中沒有爲元素創建空間。相反，它相對於屏幕的視口進行定位，並且在滾動時不移動。其最終位置取決於頂部，右側，底部和左側的值。

Answer 4

給予的位置固定在UL，您將得到列表項正確

#background { 
 
    height: 1000px; 
 
    background-image: url("https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg"); 
 
    background-position: center center; 
 
    background-size: cover; 
 
} 
 

 
#menu { 
 
    background-color: white; 
 
    border: 2px solid grey; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    background-color: white; 
 
     position: fixed; 
 
     padding:5px; 
 
     
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding: 5px 10px 5px 10px; 
 
    border: 2px solid grey; 
 
    overflow: none; 
 
    background-color: white; 
 
}

<div id="background"> 
 
      <div id="menu"> 
 
       <ul> 
 
        <li>Item 1</li> 
 
        <li>Item 2</li> 
 
        <li>Item 3</li> 
 
        <li>Item 4</li> 
 
        <li>Item 5</li>  
 
       </ul> 
 
      </div> 
 
     </div>