使用CSS 2.1反向<ul>排序

Question

我试图仅使用CSS 2.1来反转无序列表的顺序

所需的顺序是： 简介 - 历史 - 国旗 - 海上信号旗

我之前使用CSS旋转解决了这个问题，但这不再是CSS 2.1兼容。

谢谢， 弗兰克

Answer 1

一个巧妙的技巧是将父ul设置为弹性框，然后使用属性flex-direction: column-reverse;

ul{
  display:flex;
  flex-direction: column-reverse;
}

Answer 2

我会使用var rect = new fabric.Rect({ left: 200, top: 185, fill: 'red', width: 100, height: 100, padding: 0, strokeWidth : 0 }); 代替inline-block：

float

这样顺序就不会逆转。

Answer 3

您也可以使用此代码。它就像我刚刚在codepen上测试一样工作：

#Header #Navigation ul { display: flex; flex-direction: row-reverse; }

#Header #Navigation li.intro { order: 4; }
#Header #Navigation li.history { order: 2; }
#Header #Navigation li.national { order: 1; }
#Header #Navigation li.inter { order: 3; }

我不确定这是否符合您保留CSS 2.1的需要