Question

我有一个ul，其中包含以下内容：

<ul class="list-unstyled">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
</ul>

我想重新排序 Home 元素，并在某些情况下将其置于中间位置。

在较小的屏幕中查看时，列表将按照标记中指定的顺序垂直呈现。

但是，在较大的屏幕上观看时，列表将是水平的，主页将位于中间（工作和联系人）。

这可以纯粹用CSS做吗？或者我是否需要使用JS或JQuery重新排序<li>元素？

Answer 1

这是可能的与CSS，但脆弱;我想你可能会更好地使用一些JavaScript来做到这一点。基本上，你使用这样的规则：

.list-unstyled li:nth-child(1) {
    /* ...set the position of the Home entry... */
}
.list-unstyled li:nth-child(2) {
    /* ...set the position of the About Me entry... */
}
.list-unstyled li:nth-child(3) {
    /* ...set the position of the Work entry... */
}
.list-unstyled li:nth-child(4) {
    /* ...set the position of the Contact entry... */
}
.list-unstyled li:nth-child(5) {
    /* ...set the position of the Blog entry... */
}

......还有很多定位风格。您可能必须制作ul position: relative，然后绝对定位li。

以下是您可以使用这些定位样式的众多方法之一：Live Copy

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Fragile ul reordering example</title>
  <style>
    /* Put this in the relevant media query... */
    .list-unstyled {
      list-style: none;
      padding: 0;
      margin: 0;
      position: relative;
    }
    .list-unstyled li {
      display: table-cell;
      position: absolute;
      width: 20%;
      text-align: center;
    }
    .list-unstyled li:nth-child(1) {
      left: 40%;
    }
    .list-unstyled li:nth-child(2) {
      left: 0%; /* Just for completeness... */
    }
    .list-unstyled li:nth-child(3) {
      left: 20%;
    }
    .list-unstyled li:nth-child(4) {
      left: 60%;
    }
    .list-unstyled li:nth-child(5) {
      left: 80%;
    }
  </style>
</head>
<body>
<ul class="list-unstyled">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
</ul>
</body>
</html>

Answer 2

准确地说，您可以使用名为flexbox的CSS3功能 - order property。您可以使用nth-child指定要更改订单的元素，或者您只需为它们提供一个类并使用它进行操作即可。例如：

HTML：

<ul class="list-unstyled">
    <li class="active"><a href="#">Home</a></li>
    <li class="left-element"><a href="#">About Me</a></li>
    <li class="left-element"><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
</ul>

CSS：

.list-unstyled {
    display: flex;
    list-style: none;
}

.list-unstyled li {
    margin: 5px;    
}

.list-unstyled li.left-element {
    order: -1; /* the default is 0 */
}

这个例子是

Fiddle。

但是，请务必检查availability on different platforms并确保它对您没问题。我发现SO answer时发现了flexbox。

编辑：

作为T.J.Crowder mentioned，最好为特定浏览器使用前缀，因为只有某些浏览器的最新版本支持非前缀实现。您可以检查不同的前缀版本here。

检查扩展示例（更新的小提琴是here）。至于我在旧版Firefox（版本20）中的测试，看起来它不支持小于0的值，所以我为所有元素添加了订单值：

<ul class="list-unstyled">
    <li class="active center-element"><a href="#">Home</a></li>
    <li class="left-element"><a href="#">About Me</a></li>
    <li class="left-element"><a href="#">Work</a></li>
    <li class="right-element"><a href="#">Contact</a></li>
    <li class="right-element"><a href="#">Blog</a></li>
</ul>

<style>
    .list-unstyled {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        list-style: none;
    }

    .list-unstyled li {
        margin: 5px;
    }

    .list-unstyled li.left-element {
        -webkit-box-ordinal-group: 0;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 0;      /* OLD - Firefox 19- */
        -ms-flex-order: 0;              /* TWEENER - IE 10 */
        -webkit-order: 0;               /* NEW - Chrome */
        order: 0;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .list-unstyled li.center-element {
        -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
        -ms-flex-order: 1;              /* TWEENER - IE 10 */
        -webkit-order: 1;               /* NEW - Chrome */
        order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .list-unstyled li.right-element {
        -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
        -ms-flex-order: 2;              /* TWEENER - IE 10 */
        -webkit-order: 2;               /* NEW - Chrome */
        order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }
</style>

重新排序<ul> </ul>的显示顺序

2 个答案: