如何制作响应式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列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;
}

演示：Thymeleaf Documentation