18 Ağustos 2018

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

Bir Frontendci

Frontendci.com, sektörde çalışan ve gelecekte bu sektörde çalışmak isteyen tüm frontend geliştiriciler için türkçe html, css ve javascript eğitim, anlatım kaynaklarını derlemek amacıyla kurulmuştur. Türkçe eğitim videoları, anlatımlar, makaleler ve sunumların toplandığı bir mecradır.

Tüm içerikleri göster

Yorum yap

Bir Cevap Yazın