为什么文本元素是随机定位的？答案

【问题标题】：Why text elements are randomly positioned?为什么文本元素是随机定位的？
【发布时间】：2021-06-11 04:25:26
【问题描述】：

有人能解释一下为什么这些（文本 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>

这就是它的样子

【问题讨论】：

使用.wrapper .sidebar ul li {display:block}
刚试过，不行

标签： html css twitter-bootstrap bootstrap-4 twitter-bootstrap-3

【解决方案1】：

你可以尝试在侧边栏和侧边栏 ul 中使用 flex。

.sidebar {
    display: flex;
    flex-direction: column;
}

.sidebar ul {
    display: flex;
    flex-direction: column;
}

当我在 w3schools 中运行您的代码时，它运行良好。

【讨论】：

嗨，非常感谢它与上面的 CSS 一起工作！那么问题是为什么它在没有它的情况下在 W3 中工作，但在浏览器中却不能工作？
对我来说，当我在这里运行您的代码 sn-p 时，即使在 chrome 中它也适用于我。您应该检查您正在测试它的浏览器。有时不同的浏览器对默认元素有不同的显示样式。使用 flex 使其在每个地方都保持一致。