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;
}

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
}

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:

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.

Bu sayfayı düzenle