如何解决为什么文本元素是随机定位的?
有人可以解释一下为什么这些(文本 1-5)不是相互下方而是随机放置的? (截图如下)
.container1{
background-color: #f1f1f1;
height: 150px;
width: 150px;
padding: 20px;
border: 1px solid #bfbfbf;
margin: 10px;
}
.container-fluid{
position: fixed;
float: right;
padding-left: 320px;
padding-right: 20px;
}
.wrapper .sidebar{
position: fixed;
width: 300px;
height: 100%;
background: #f1f1f1;
border: 1px solid #bfbfbf;
}
.wrapper .sidebar ul li a{
color: black;
}
h5{
padding-top: 10px;
padding-left: 10px
}
<body>
<div class="wrapper">
<div class="sidebar">
<ul><li>Text-1</li></ul>
<ul><li>Text-2</li></ul>
<ul><li>Text-3</li></ul>
<ul><li>Text-4</li></ul>
<ul><li>Text-5</li></ul>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="container1 col-md-2 col-sm-2 col-xs-3"></div>
<div class="container1 col-md-2 col-sm-2 col-xs-3"></div>
<div class="container1 col-md-2 col-sm-2 col-xs-3"></div>
<div class="container1 col-md-2 col-sm-2 col-xs-3"></div>
<div class="container1 col-md-2 col-sm-2 col-xs-3"></div>
</div>
</div>
</body>
这就是它的样子
解决方法
你可以尝试在侧边栏和侧边栏 ul 中使用 flex。
.sidebar {
display: flex;
flex-direction: column;
}
.sidebar ul {
display: flex;
flex-direction: column;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。