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

这是因为您为position: fixed代码定义了li。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

取出position: fixed。这会修复浏览器视口中的元素并将其从流中删除。不是你想要的。

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

<强>固定

元素从正常文档流中删除;没有为页面布局中的元素创建空间。相反，它相对于屏幕的视口定位，并且在滚动时不会移动。它的最终位置由顶部，右侧，底部和左侧的值决定。

Answer 3

将位置固定为ul，您将正确获得列表项

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 4

你需要移除位置：固定在'li'元素中，因为如果你给每个'li'元素位置固定，这将使你的项目总是重叠。也许你可以尝试更新你的'ul'和'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;
}

为什么我的列表项重叠？

4 个答案: