Question

我有一个ul，由于流动原因，它就像列一样工作。当屏幕分辨率发生变化时，有没有办法将最后的li放在首位？

修改好。试图使它与弹性框一起使用。

 .postpreview ul {
list-style: none;
display: inline-flex;

}

.postpreview ul li {
flex: 0 100px 30px;
}

@media(max-width: 1000px) {
postpreview ul {
flex-direction: row-reverse;
justify-content: flex-end;
 }
}

现在，当分辨率变为移动时，它会保持在右侧，而我实际上需要它在顶部。这里有实时链接 http://soloveich.com/pr6/blog/

Answer 1

使用flexible boxes的纯CSS解决方案：

ul {
  display: flex;
}
li {
  flex: 0 0 30px;
}
@media(max-width: 1000px) {
  ul {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
}

Live example，屏幕宽度阈值为1000px。

更新：如果您需要将布局从水平更改为垂直，请在媒体查询中使用flex-direction: column。有了你想拥有什么和什么时候的例子会有所帮助，这个问题可以使用一些澄清。

Answer 2

css代码：

nav ul li { display: inline; margin: 0 100px; }

html代码：

<nav>
<ul>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
</ul>
</nav>

JS代码：

function Func(){
var list = $('nav ul li'),
    firstLi = list.first().offset().top,
    lastLi = list.last().offset().top,
    mLeft = parseInt(list.css('marginLeft')),
    mRight = parseInt(list.css('marginRight'))
if(firstLi != lastLi){
    --mLeft
    --mRight
    list.css({
        'marginLeft': mLeft,
        'marginRight': mRight
     })  
     Func();
  }
}

 Func();

另一个解决方案：

您可以使用不同分辨率的媒体查询。

Answer 3

var litag = $('ul');
var litags = litag.children('li');
litag.append(litags.get().reverse());

通过更改分辨率更改li顺序

3 个答案: