CODEWITHSUNDEEP
csshtml-listsright-to-left
user5623422
user5623422

Reputation:

How to make responsive RTL list?

I have a list of links, which looks like:

<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>

And this list should look like 2 colums with 3 rows, and this list should be responsive at the left side of the page (in the right side I already have a responsive banner).

Also, content has RTL. And this link are RTL too.

Upvotes: 0

Views: 367

Answers (1)

Mohammad Mehrabi
Mohammad Mehrabi

Reputation: 340

You can use CSS3 to make a list in 2 columns. like this:

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;
}

Demo: http://codepen.io/anon/pen/WrZMgw

Upvotes: 2

Related Questions