Question

我有一个jquery移动列表视图，我想通过css 在列表中首先显示其中一个出现而不移动项目中的li项目码。我不希望li项目处于固定位置（换句话说，我希望它与列表一起滚动）。我只是希望它看起来好像是第一个项目。

这是列表的代码（仅2个项目）。所以我想知道如何设计出第二个李先生的样式。

<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。这允许您通过使用子项上的order属性来控制元素的顺序。

例如，如果您的HTML是：

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

然后，您可以将UL设置为CSS中的柱状弹性框：

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

您可以为想要带到顶端的孩子分配一个否定order：

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

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

可以通过css首先显示列表项吗？

1 个答案: