Listeyi Dikey Alfabetik Olarak Sıralamak

Listeyi Dikey Alfabetik Olarak Sıralamak

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
 <li>Item 6</li>
 <li>Item 7</li>
 <li>Item 8</li>
 <li>Item 9</li>
 <li>Item 10</li>
 <li>Item 11</li>
 <li>Item 12</li>
 <li>Item 13</li>
 <li>Item 14</li>
 <li>Item 15</li>
 <li>Item 16</li>
 <li>Item 17</li>
 <li>Item 18</li>
 <li>Item 19</li>
 <li>Item 20</li>
 <li>Item 21</li>
 <li>Item 22</li>
 <li>Item 23</li>
 <li>Item 16</li>
 <li>Item 17</li>
 <li>Item 18</li>
 <li>Item 19</li>
 <li>Item 20</li>
 <li>Item 21</li>
 <li>Item 22</li>
 <li>Item 23</li>
</ul>

Diye bir listemiz olsun. Bu listenin default görünümü soldan sağa alfabetik olacaktır yani şöyle (Default),

Bu liste ne kadar büyük olursa gözün okuması o kadar zorlaşacaktır. Bunu çözmenin yolu yukarıdan aşağıya alfabetik yapıp dikey olarak ilerlemektir. Bunu ul tagini bölmeden css ile yapmak için,

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

Yaptığı şey ul’ye bir yükseklik verip li’leri belirlediğiniz sütun genişliklerine (column-width) göre dizmek. Bu yöntem Internet Explorer’da düzgün çalışmamaktadır.  IE için aşağıdaki kodu eklemeniz yeterli olacaktır. Bu kod alfabetik dizmez ama düzgün görünmesini sağlar.

<!--[if lt IE 10]>
<style>
li {
 width: 25%;
 float: left
}
</style>
<![endif]-->