Css li float sorunu ve çözümü

Merhaba arkadaşlar. Sitelerimizde akıllı listeler için hemen hemen hepimiz ul li taglarını kullanırız. Bazen bu li tagları ile listelerimizi yan yana almak ister ve el mahkum float: parametresini kullanırız. Kullanırız kullanmasına ama gel gelelim ki float özelliği nedeni ile gerek ul tagımız gerekse sitemiz üzerindeki ul tagından sonra gelen tag ile iç içe geçer ve tasarım neredeyse allak bullak olur. Peki şimdi ne yapmalıyız. Aslında bu işlem için en azından iki yöntem var. 1. Yöntem : css tarafında

.clear{ clear:both;}

özelliği ekleyip listeleme alnında fazladan boş bir li alanı eklememiz ve bu alnında class özelliğini clear yapmamız gerekiyor. Eskiden el mahkum kullanmak zorunda kalırdım ve sonuca %100 ulaşamasam da %90lar da kalırdım. Örnek kullanım :

 

Anasayfa
Hakkımızda



 

Şimdi gelelim en basit ve profesyonel yönteme 2. Yöntem : Css Kodları

  ul.listele1 li {
        display: block;
        float: left;
        .......
    }


   ul.listele1:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

Html tarafı

Anasayfa
Hakkımızda
 

işte hepsi bu kadar. ne fazla bir li etiketi nede fazla bir tag. Ben burada listele1 dedim site kendinize göre uyarlama yapabilirsiniz. Faydalı olması dileğiyle.