Django响应式树形列表移动端对齐错乱修复方案

使用Django搭建家谱类网站，基于django-mptt实现树形层级亲属列表时，出现响应式显示异常：

• 电脑端访问列表展示效果正常：
  
• 手机端访问时列表出现对齐错乱、内容重叠问题：
  

django-mptt模板代码 #

<ul class="root">
{% recursetree GT %}
    <br><li>
        <details open class="detail"> 
        <summary><a href="{% url 'person-detail' node.id %}?id={{node.id}}">{{ node.name }} </a><span><sup>{% if node.date_birthday|date:'d.m' == '01.01' %} ({{node.date_birthday|date:'Y'}} - {{node.date_death|date:'Y'}} г.г) {% else %}({{node.date_birthday|date:'d.m.Y'}} - {{node.date_death|date:'d.m.Y'}} г.г){% endif %}</sup></span></summary>
        {% if not node.is_leaf_node %}
            <ul class="children">
                <a href="#">{{ children }}</a
            </ul>
        {% endif %}
    </details>
    </li>
{% endrecursetree %}
</ul>

原有CSS样式 #

.root li a{
text-decoration: none;
position: relative;
font-family: 'Montserrat', sans-serif;
color: #524f4e;
} 
.root li a::before{
content: '';
bottom: 0;
right: 0;
position: absolute;
width: 0%;
height: 2px;
background-color: #2D764A;
transition: 0.3s;
}
.root li a:hover:before {
width: 100%;
left: 0;
}
.root li{
list-style-type:none;
color:  green;
}

.root li span{
color: black;
}
.Maingenwrite{
text-align: center;
font-family: 'Montserrat', sans-serif;
}

.detail summary{
position: absolute;
}

移动端错位核心是CSS写法问题，叠加少量HTML语法不规范：

• 给.detail summary设置了position: absolute，元素完全脱离正常文档流，PC端屏幕宽度充足时错位不明显，移动端宽度有限时，后续子列表元素会直接顶到summary所在位置，出现重叠、对齐错乱
• 原模板存在语法问题：子列表外层错误包裹a标签，且a标签未正常闭合；li标签前额外加<br>标签制造间距，不符合HTML规范
• 缺少基础的响应式规则：没有设置视口适配，列表没有自动换行、层级缩进适配规则，小屏幕下长内容容易溢出

第一步：修正模板语法错误 #

移除不规范的br标签、错误包裹子列表的a标签，修正闭合问题，调整后模板代码：

<ul class="root">
{% recursetree GT %}
    <li>
        <details open class="detail"> 
        <summary>
            <a href="{% url 'person-detail' node.id %}?id={{node.id}}">{{ node.name }} </a>
            <span><sup>
                {% if node.date_birthday|date:'d.m' == '01.01' %} 
                ({{node.date_birthday|date:'Y'}} - {{node.date_death|date:'Y'}} г.г) 
                {% else %}
                ({{node.date_birthday|date:'d.m.Y'}} - {{node.date_death|date:'d.m.Y'}} г.г)
                {% endif %}
            </sup></span>
        </summary>
        {% if not node.is_leaf_node %}
            <ul class="children">
                {{ children }}
            </ul>
        {% endif %}
    </details>
    </li>
{% endrecursetree %}
</ul>

注意：需要在HTML的head区域加入视口元标签，否则移动端不会按设备实际宽度渲染页面：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

第二步：调整CSS样式，修复定位+增加响应式规则 #

移除导致脱离文档流的绝对定位，增加列表缩进、自动换行规则，补充移动端适配样式，替换后CSS代码：

/* 统一盒模型，避免宽度计算异常 */
* {
    box-sizing: border-box;
}
.root {
    padding-left: 1rem;
    width: 100%;
    /* 长内容自动换行，避免溢出 */
    overflow-wrap: break-word;
    word-break: break-word;
}
.root li a{
    text-decoration: none;
    position: relative;
    font-family: 'Montserrat', sans-serif;
    color: #524f4e;
    display: inline-block;
} 
.root li a::before{
    content: '';
    bottom: 0;
    right: 0;
    position: absolute;
    width: 0%;
    height: 2px;
    background-color: #2D764A;
    transition: 0.3s;
}
.root li a:hover:before {
    width: 100%;
    left: 0;
}
.root li{
    list-style-type:none;
    color:  green;
    width: 100%;
    margin: 0.3rem 0;
    /* 树形层级缩进 */
    padding-left: 1.2rem;
    position: relative;
}
/* 可选：树形层级连接线，优化层级辨识度，不需要可删除 */
.root li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 0.8rem;
    height: 1px;
    background: #2D764A;
}
.root li span{
    color: black;
}
.Maingenwrite{
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}
/* 核心修复：让summary回归正常文档流 */
.detail summary{
    position: relative;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    width: 100%;
    list-style: none;
}
/* 隐藏details默认三角标记（兼容多浏览器） */
.detail summary::-webkit-details-marker {
    display: none;
}
/* 子列表缩进 */
.root .children {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}
/* 移动端适配 */
@media (max-width: 768px) {
    .root {
        padding-left: 0.5rem;
    }
    .root li {
        padding-left: 1rem;
    }
    .root .children {
        padding-left: 1rem;
    }
}

修复后所有元素回归正常文档流，不会再出现重叠错位，各级亲属的层级缩进关系在小屏幕下依然清晰，长姓名、生卒日期会自动换行不会溢出容器。

内容的提问来源于stack exchange，提问作者ce6erg tiz