リスト項目が重複するのはなぜですか？

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

あなたが位置削除する必要があるリスト項目を取得します。「あなたは、すべてを与えている場合ので、「李」要素に固定しますあなたのアイテムが常に重なり合うように固定された「li」要素の位置が固定されます。

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>