CSS Yatay Menü Yapımı

24 Kasım 2022

display:inline çözümü

Öncelikle menü için gereken HTML yapısını oluşturalım :

<nav>
  <ul>
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkında</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>
</nav>

Varsayılan olarak liste elemanlarının(li) display özelliği list-item olduğundan tıpkı "display:block" değerine sahip elemanlar gibi yatayda alabildiği tüm genişliği kaplıyor böylece her liste elemanı bir alt satırdan başlıyor. li etiketinin display değerini "inline" olarak değiştirirsek her bir liste elemanı yan yana gelecektir. Ayrıca her elemanın başında bulunan disk (marker) da kaybolacaktır.

li {
  display: inline;
}

See the Pen Yatay Menü 0 by Furkan (@elbaley) on CodePen.

float:left çözümü

Liste elemanlarını yan yana görüntülemek için "float" özelliği kullanabilir. Örneğin "float:left;" elemanın dışındaki container'ın soluna yaslanmasını ve yalnızca kapladığı alan kadar yer almasını sağlar.

li {
  float: left; // elemanların sola yaslanmasını sağlar
}

See the Pen Yatay Menü 1 by Furkan (@elbaley) on CodePen.

Ancak yukarıdaki demoda da göründüğü gibi li elemanları yanyana gelince display özellikleri list-item olması sebebiyle markerlar yeniden gösteriliyor ve kötü bir görüntü oluşturuyor.

Bunu düzeltmek için eklemeler yapalım:

See the Pen Yatay Menü 2 by Furkan (@elbaley) on CodePen.

display:flex çözümü

"display:flex" kullanarak tüm elemanları yan yana alabiliriz. Ardından "gap" ekleyerek flex elemanlarının arasına boşluk ekleyebiliriz.

See the Pen Yatay Menü 2 by Furkan (@elbaley) on CodePen.

Bu sayfayı düzenle