如何使这个Ul元素位于Div元素下面？
如何使这个Ul元素位于Div元素下面？
提问于 2022-07-08 18:46:20
HTML
<div id="dashboard">
<div id="Sidebar">
<div id="User-Icon"></div>
<ul>
<li a href="#">Home</li>
<li a href="#">Home</li>
<li a href="#">Home</li>
<li a href="#">Home</li>
<li a href="#">Home</li>
</ul>
</div>
<div id="Dashboard">
</div>
<div id="UserFeed">
</div>
</div>CSS
* {
Font-Family: Arial;
Margin: 0;
Padding: 0;
}
#dashboard {
display: flex;
height: 100vh;
width: 100vw;
}
#Sidebar {
background-color: #5c5c5c;
height: 100%;
width: 20%;
display: flex;
justify-content: center;
align-self: flex-end;
}
#Dashboard {
background-color: #999999;
height: 100%;
width: 50%;
}
#UserFeed {
background-color: #D9D5D6;
height: 100%;
width: 30%;
}
#User-Icon {
width: 150px;
height: 150px;
background-color: white;
border-radius: 50px;
margin-top: 50px;
}
ul {
}
li {
list-style: none;
margin-top: 50px;
}我的目标是移动在我的用户之下的ul -图标在一个中心的事情，如果有人可以帮助我，这将是非常感谢！
我试着使用“清除”、“左”、“ul”、“浮动”、“底部”之类的方法，但我只是找不到任何东西去工作。我想知道更多关于这方面的情况，如果可以的话，我希望这些解释对我来说更详细一些。
回答 4
Stack Overflow用户
回答已采纳
发布于 2022-07-08 18:55:17
只需添加弹性方向和对齐项即可。
#Sidebar {
background-color: #5c5c5c;
height: 100%;
width: 20%;
display: flex;
flex-direction: column;
align-items:center
}Stack Overflow用户
发布于 2022-07-08 18:52:54
你试过z索引了吗？
尝尝这个
ul {
z-index: -1;
}Stack Overflow用户
发布于 2022-07-08 19:01:51
在侧栏中更改此
#Sidebar {
background-color: #5c5c5c;
height: 100%;
width: 20%;
display: flex;
align-items: flex-end;
flex-direction: column;
}它将保持您试图实现的格式设置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72915776
复制相关文章
相似问题
腾讯云开发者
