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]-->
Yorum yap