英文:
Li will not stack above each other on mobile
问题
以下是您要翻译的内容：
"所以我正在创建我的应用程序的移动版本，而这个移动版本的难点在于响应性。我将发布我想要的图片以及我得到的图片。
我想要的：
我得到的：
正如您所见，这是 ul（无序列表）：
正如您所见，这些是 li（列表项）（它们都在同一个位置）：
我将展示我的代码，希望有人可以告诉我发生了什么。
HTML：
<body>
<header class="header">
<nav class="navigation">
<div class="logo">
<img src="Images/logo.svg">
</div>
<ul class="nav-items">
<li class="nav-items nav-li"><a href=#>Home</a></li>
<li class="nav-items nav-li"><a href=#>About</a></li>
<li class="nav-items nav-li"><a href=#>Contact</a></li>
<li class="nav-items nav-li"><a href=#>Blog</a></li>
<li class="nav-items nav-li"><a href=#>Careers</a></li>
</ul>
<a id="invite" class="btn-nav" href="#">
<button class="btn">Request Invite</button>
</a>
</nav>
</header>
<!-- 我有其他代码，但我认为它们不重要。 -->
</body>
CSS：（我认为重要的部分）
body {
width: 100%;
height: 100%;
position: relative;
height: 100vh;
width: 100vw;
}
.mobileNav {
position: absolute;
color: rgb(150, 152, 166, 0.85);
bottom: -5rem;
left: 0%;
display: block;
width: 100%;
min-height: 100%
}
.nav-items-mobile {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 100%;
}
.nav-li {
padding: 0 1rem 0 1rem;
height: 100%;
cursor: pointer;
}
我确实有 JavaScript 代码，但我认为它不需要，因为这些只是 CSS 类。我认为如果我能正确堆叠这些 li，则问题将得到解决。
谢谢您！
英文:
So I am creating a mobile version of my app, and the tricky part about this mobile is the responsiveness. I'll post a picture of what I want and a picture of what I am getting.
What I want:
What I am getting:
As you can see, this is the ul
As you can see, these are the lis (they're all in the same place)
I'll show you my code, and hopefully someone can tell me what is going on.
HTML:
<body>
<header class="header">
<nav class="navigation">
<div class="logo">
<img src="Images/logo.svg">
</div>
<ul class="nav-items">
<li class="nav-items nav-li"><a href=#>Home</a></li>
<li class="nav-items nav-li"><a href=#>About</a></li>
<li class="nav-items nav-li"><a href=#>Contact</a></li>
<li class="nav-items nav-li"><a href=#>Blog</a></li>
<li class="nav-items nav-li"><a href=#>Careers</a></li>
</ul>
<a id="invite" class="btn-nav" href="#">
<button class="btn">Request Invite</button>
</a>
</nav>
</header>
<!-- I have other code below that I don't think is important. -->
</body>
CSS: (What I think is important)
body {
width: 100%;
height: 100%;
position: relative;
height: 100vh;
width: 100vw;
}
.mobileNav {
position: absolute;
color: rgb(150, 152, 166, 0.85);
bottom: -5rem;
left: 0%;
display: block;
width: 100%;
min-height: 100%
}
.nav-items-mobile {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 100%;
}
.nav-li {
padding: 0 1rem 0 1rem;
height: 100%;
cursor: pointer;
}
I do have JS code, but I believe it's not needed because these are just CSS classes. I believe if I can just stack the lis properly, then the problem will be solved.
Thank you
答案1
得分: 1
你的 position 属性在这个上下文中没有意义。
来自 mdn web docs
absolute
元素从正常文档流中移除，页面布局中不会为元素创建空间。元素相对于其最近的包含块进行定位。其最终位置由 top、right、bottom 和 left 的值确定。
当 z-index 的值不为 auto 时，此值会创建一个新的堆叠上下文。绝对定位框的外边距不会与其他外边距合并。
因此，你的 li 元素会堆叠在彼此之上，因为它们相对于父元素定位，忽略了前后的元素。
你可能还想重新考虑你的 min-height 属性。将其设置为 100% 意味着你的 <li> 的高度至少与父元素一样高，这在你有多个 <li> 的情况下是没有意义的。对于 height 属性也是一样。
在没有这些属性的情况下，这是你的页面：
英文:
Your position property doesn't make sense in this context.
From mdn web docs
> absolute
>
> The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its closest containing block. Its final position is determined by the values of top, right, bottom, and left.
>
> This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.
So your li elements stack on top of each other because they are positioned with respect to the parent element, ignoring the elements before and after.
You might also want to reconsider your min-height property. Setting it to 100% means that your <li> will have height at least as high as the parent element, which doesn't make sense since you have multiple <li>. Same goes for your height property.
Here's your page without these properties:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论