可以通过 css 使列表项首先出现吗？

Question

我有一个 jquery 移动列表视图，我想通过 css 使 li 项目之一出现在列表的第一位没有移动代码中的li项。我不希望 li 项目处于固定位置（换句话说，我希望它随列表滚动）。我只是想让它看起来好像是第一个 li 项。

这是列表的代码（只有 2 里项目）。所以我想知道如何将第二个 li 设置为首先出现。

<div data-role="page" data-theme="c"> 
<div data-role="content">
<ul data-role="listview" data-inset="false"><li>
    <a href="http://domain.com/1XyK?id=1117448578">
    <img src="https://domain.com/moreicon/EN/bundle-loseweight.png" />
    <h2>Healthy Weight Loss</h2>
    <p>Now includes Mindful Eating!</p>
    <span class="ui-li-count">NEW</span>
    </a>
</li>
<li>
    <a href="http://domain.com?id=977040364">
    <img src="https://domain.com/moreicon/EN/bundle-top10.png" />
    <h2>Our Top 10 Apps!</h2>
    <p>Save BIG on our chart toppers!</p>
    <span class="ui-li-count">SAVE</span>
    </a>
</li>

这可能吗？

Answer 1

如果您的浏览器支持允许，一种可能性是 Flexbox。这允许您通过在 child.

上使用 order 属性来控制元素的顺序

例如，如果您的 HTML 是：

<ul>
  <li>First</li>
  <li>Second</li>
</ul>

然后，您可以在 CSS 中将 UL 样式设置为柱状 flexbox：

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

并且您可以将负值 order 分配给您想要置顶的 child：

ul li:nth-of-type(2) {
  order: -1;
}

工作示例：http://codepen.io/honzie/pen/oLxENz

可以通过 css 使列表项首先出现吗？

Possible to make a list item appear first via css?

css

listview

jquery-mobile