如何制作响应式RTL列表？

Question

我有一个链接列表，它看起来像：

<ul> 
<li><a href="#">Link 1</a></li> 
<li><a href="#">Link 2</a></li> 
<li><a href="#">Link 3</a></li> 
<li><a href="#">Link 4</a></li> 
<li><a href="#">Link 5</a></li> 
<li><a href="#">Link 6</a></li> 
</ul> 

而且这个名单应该像2个colums有3行，这个名单应该是响应在页面的左侧（在右侧我已经有一个响应式横幅）。

此外，内容有RTL。而这个链接也是RTL。

Answer 1

您可以使用CSS3在2列中创建列表。像这样：

HTML：

<ul> 
<li><a href="#">Link 1</a></li> 
<li><a href="#">Link 2</a></li> 
<li><a href="#">Link 3</a></li> 
<li><a href="#">Link 4</a></li> 
<li><a href="#">Link 5</a></li> 
<li><a href="#">Link 6</a></li> 
</ul> 

CSS：

ul{ 
-moz-column-count: 2; 
-moz-column-gap: 20px; 
-webkit-column-count: 2; 
-webkit-column-gap: 20px; 
column-count: 2; 
column-gap: 20px; 
} 

演示：http://codepen.io/anon/pen/WrZMgw