Question

在我的小提琴中，li项目垂直对齐并显示floated right。

现在我的问题是商品的顺序，我想先显示test1，test2，然后显示test3。目前它被倒置了。

我该如何解决？

注意：li项是从数据库中动态提取的。

HTML

<div id="wrapper">
    <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
    </ul>    
</div>

CSS

#wrapper{
    width: 500px;
    height: 300px;
    background-color: yellow;
    display: table;
}

ul{
    display: table-cell;
    vertical-align: middle;
    text-align:right;
}

li{
    display: inline-block;
    text-align: center;
    padding: 30px;
    margin: 5px;
    background-color: red;
}

Answer 1

请勿将列表元素浮动，而是将<ul>文本对齐。由于您的列表项是内联块，因此它们将遵循规则并从右侧排列：

ul{
    display: table-cell;
    vertical-align: middle;
    text-align:right;
}

li{
    display: inline-block;
    text-align: center;
    padding: 30px;
    margin: 5px;
    background-color: red;
}

JSFiddle

或者，将元素打印回来：

<div id="wrapper">
    <ul>
        <li>test3</li>
        <li>test2</li>
        <li>test1</li>
    </ul>    
</div>

JSFiddle

动态LI显示顺序

1 个答案: