纯CSS实现display:table布局下ul列表的交替行列顺序反转

完全可以仅通过CSS实现该效果，无需修改现有HTML结构、无需使用table元素，具体方案如下：

实现逻辑 #

将每个<li>设置为flex布局容器，默认按「图片在前、文本在后」的水平顺序排列；通过:nth-child(even)伪类选中所有偶数行的条目，将flex主轴排列方向设置为反向，即可自动交换两列的顺序。

完整CSS代码 #

img {
    max-width: 50px;
    height: auto;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    gap: 10px;
}
/* 偶数行反转列顺序 */
li:nth-child(even) {
    flex-direction: row-reverse;
}
.item-name {
    display: block;
    font-weight: bold;
}
.item-details {
    display: block;
}

效果验证 #

• 奇数行保持原有布局：图片居左，文本居右
• 偶数行自动反转布局：文本居左，图片居右
• 完全保留原有<ul>和<li>结构，无需手动调整HTML元素顺序，实现了内容与样式的完全分离。

修改前效果 #

修改后效果 #

内容的提问来源于stack exchange，提问作者Sir Athos