为什么我的无序列表被推到了右侧？

Question

我对 HTML 几乎一无所知，对 CSS 更是一无所知，亲爱的主啊，我不会为一个所见即所得的编辑器付出什么，因为它让这件事变得更容易！

我根本不明白为什么我创建的无序列表没有直接出现在其上方文本的下方！

我已将相关片段放入jsbin中

https://jsbin.com/kebidikozu/edit?html,输出

这是有问题的代码：

.upper {
  max-height: 100%;
  padding-top: 40px;
  padding-bottom: 170px;
  overflow: auto;
}

.downwarning {
  display: flex;
  justify-content: center;
  margin-top: 5px;
  font-size: 90%;
  color: gray;
}

ul {
  display: table;
  margin: 0 auto;
  list-style-type: disc;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
<div class="upper" id="upperid">

<span class="downwarning">this is just some text i right now it really doesnt matter what is says but WHY OH WHY is my haiku UL getting pushed to the right?:
    <br>
    <br>
    <ul>
      <li>It's not DNS</li> 
      <li>There is no way it is DNS</li>
      <li>It was DNS</li>
    </ul>
  </span>

</div>

如果有人能让我知道为什么会发生这种格式噩梦，我将不胜感激！

Answer 1

如果有人能让我知道为什么会发生这种格式噩梦，我将不胜感激！

问题是

display: flex

——也许是对flex布局作用的误解——它默认在内联轴上的布局，在从左到右的语言中是水平的，它可能是从上到下水平的——底部布局，但到目前为止我还没有尝试过。

在这种情况下，将

display: flex

放置在父元素 -

.downwarning

上会导致子元素成为弹性项目，所有这些都将在内联轴上彼此相邻放置。

只需删除

display: flex

即可解决问题：

.upper {
  max-height: 100%;
  padding-top: 40px;
  padding-bottom: 170px;
  overflow: auto;
}

.downwarning {
  justify-content: center;
  margin-top: 5px;
  font-size: 90%;
  color: gray;
}

ul {
  display: table;
  margin: 0 auto;
  list-style-type: disc;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
<div class="upper" id="upperid">

<span class="downwarning">this is just some text i right now it really doesnt matter what is says but WHY OH WHY is my haiku UL getting pushed to the right?:
    <br>
    <br>
    <ul>
      <li>It's not DNS</li> 
      <li>There is no way it is DNS</li>
      <li>It was DNS</li>
    </ul>
  </span>

</div>

显然，因为

justify-content

是一个 Flex 或 grid 布局属性，也可以/应该删除。

Answer 2

因为您将

<ul>

标签放在

<span>

标签内，列表显示在文本后面，所以如果您关闭

<span>

标签，然后写入

<ul>

标签，列表将显示在文本下方。

<span class="downwarning">
this is just some text i right now it really doesnt matter what is says but WHY OH WHY is my haiku UL getting pushed to the right?:
</span>
    <br>
    <br>
    <ul>
      <li>It's not DNS</li> 
      <li>There is no way it is DNS</li>
      <li>It was DNS</li>
    </ul>