求助：我的无序列表（UL）为何被推至右侧无法正常对齐？

架构老林

2026-7-13

问题原因及修复方案

核心问题1：块级元素嵌套在行内元素中

你把<ul>（块级元素）放在了<span>（行内元素）里面，这不符合HTML规范，会导致浏览器渲染异常，是布局混乱的根源之一。块级元素不应被嵌套在行内元素中，需将<span>替换为块级容器<div>。

核心问题2：Flex布局的错误使用

.downwarning设置了display: flex，flex容器的子元素会默认在一行排列，你的文本和<ul>会被当作两个独立的flex项，再加上<ul>设置了display: table和margin: 0 auto，最终导致列表被挤到右侧。

修复代码

修正后的HTML：

<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">
  <div 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>
  </div>
</div>

修正后的CSS：

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

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

ul {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
  list-style-type: disc;
}

修复说明：

将<span class="downwarning">改为<div class="downwarning">，符合HTML嵌套规范，块级容器可正确承载文本和列表元素。
移除.downwarning的display: flex和justify-content: center，改用text-align: center实现文本居中，确保列表能自然跟随在文本下方。
修改<ul>的display为inline-block，同时设置text-align: left让列表项保持左对齐，避免列表内容被强制居中。