Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS3 实现翻转列表 by 一丝</title>
</head>
<body>
  <p>如何用 CSS3 实现一个翻转的列表，要求在IE中看到是正序的，非ie用户是倒序的(包括内容)</p>
  
  <h2>使用 Flex 和 counter-increment: list -1</h2>
  <p>前提是列表个数是已知且不变的</p>
<ol class="type-toc">
  <li>list 1</li>
  <li>list 2</li>
  <li>list 3</li>
  <li>list 4</li>
</ol>
  <h2>使用 Flex 和 ol 中的 reversed 属性</h2>
  <p>显然该方法更加灵活</p>
<ol reversed>
  <li>list 1</li>
  <li>list 2</li>
  <li>list 3</li>
  <li>list 4</li>
</ol>
  
</body>
</html>
 
​
ol{
  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -moz-box; /* Firefox 17- */
  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex; /* Firefox 18+ */
  display: -ms-flex; /* IE 10 */
  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
​
​
  /* 旧版本 flex */
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
​
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
​
li{
  background-color: lightblue;
  margin-bottom: 5px;
}
​
​
/* ==========================================================================
   display:flex 后需要重新生成列表序号
   ========================================================================== */
​
/**
* 数字编号，兼容 IE8+
* 1. 为每个 ol 元素创建新的计数器实例
* 2. 隐藏默认的列表项
*/
​
ol.type-toc,
.type-toc ol {
  counter-reset: list 5;/* 1 */
  list-style-type: none !important; /* 2 */
  list-style-type: decimal\9 !important;
  
  margin-top: 16px;
  width: 100%;
  width: auto\9;
}
​
.type-toc li {
  position: relative;
}
​
.type-toc li:before {
  color: blue;
  position: absolute;
  left: -29px;
  top: 0;
}
​
/**
* 1. 降序显示列表编号
* 2. 所有计数器中间以“.”分隔的值
*/
.type-toc li:before {
  counter-increment: list -1; /* 1 */
  content: counters(list, ".")"."; /* 2 */
  display: none\9;
  
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers