如何用CSS反转HTML家族树布局且保持HTML结构顺序不变

我帮你搞定这个家族树的反转需求啦！不用改动HTML结构，只需要调整CSS里的几个关键属性就能实现倒置效果，最终效果和你给出的示例一致。

修改后的完整CSS代码 #

.tree { margin: 0; padding: 0; }
.tree ul { 
    padding-bottom: 20px; /* 替换原padding-top为底部内边距 */
    position: relative; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
}
.tree li { 
    float: left; 
    text-align: center; 
    list-style-type: none; 
    position: relative; 
    padding: 0 5px 20px 5px; /* 替换原padding-top为底部内边距 */
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
}
.tree li::before, .tree li::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; /* 替换原top为底部定位 */
    right: 50%; 
    border-bottom: 1px solid #ccc; /* 替换原border-top为底部边框 */
    width: 50%; 
    height: 20px; 
}
.tree li::after { 
    right: auto; 
    left: 50%; 
    border-left: 1px solid #ccc; 
}
.tree li:only-child::after, .tree li:only-child::before { 
    display: none; 
}
.tree li:only-child { 
    padding-bottom: 0; /* 替换原padding-top为底部内边距 */
}
.tree li:first-child::before, .tree li:last-child::after { 
    border: 0 none; 
}
.tree li:last-child::before { 
    border-right: 1px solid #ccc; 
    border-radius: 0 0 5px 0; /* 调整圆角为底部方向 */
    -webkit-border-radius: 0 0 5px 0; 
    -moz-border-radius: 0 0 5px 0; 
}
.tree li:first-child::after { 
    border-radius: 0 0 0 5px; /* 调整圆角为底部方向 */
    -webkit-border-radius: 0 0 0 5px; 
    -moz-border-radius: 0 0 0 5px; 
}
.tree ul ul::before { 
    content: ''; 
    position: absolute; 
    bottom: 0; /* 替换原top为底部定位 */
    left: 50%; 
    border-left: 1px solid #ccc; 
    width: 0; 
    height: 20px; 
}
.tree li a { 
    border: 1px solid #ccc; 
    padding: 5px 10px; 
    text-decoration: none; 
    color: #666; 
    font-family: arial, verdana, tahoma; 
    font-size: 11px; 
    display: inline-block; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
}
.tree li a:hover, .tree li a:hover+ul li a { 
    background: #c8e4f8; 
    color: #000; 
    border: 1px solid #94a0b4; 
}
.tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before { 
    border-color: #94a0b4; 
}

关键修改点说明 #

• 把所有涉及顶部内边距（padding-top）的属性替换为底部内边距（padding-bottom），包括.tree ul、.tree li和.tree li:only-child
• 将伪元素的定位基准从top: 0改为bottom: 0，对应.tree li::before/.tree li::after和.tree ul ul::before
• 把连接线条的边框属性从border-top改为border-bottom，对应.tree li::before/.tree li::after
• 调整圆角的方向，将原有的顶部圆角改为底部圆角，适配倒置后的布局

这样修改后，整个家族树就会完全倒置，同时保持原有的HTML结构不变，hover交互效果也能正常生效哦！

内容的提问来源于stack exchange，提问作者Gabriel Madeira