display:inline elemanlar arasındaki doğal boşluklar
Daha önce gözüme çarpmamış olmaması ilginç geldi. Belki çarpmıştırda ben es geçmişimdir. Durumu şöyle açıklayayım. Basit bir menü oluşturmak istedim.
<ul> <li>deneme</li> <li>olarak</li> <li>bir örnek </li> </ul>
Yatay bir menü olacağı için
ul li{display:inline;}
eklemesini yaptım, daha sonra da padding değerleri ekleyince fark ortaya çıktı.
ul li{ padding:0 12px; background-color:#999}
İşin aslı İnternet Explorer 6 ve 7’de istediğim gibi olurken yeni nesil tarayıcılarda arada fazladan boşluklar atanmış gördüm. margin:0 değeri atadım ama olmadı biraz araştırınca gördüm ki display:inline elemanlar(display:inline-block’ta da oluyor) arasında kod kısmında boşluk varsa bu boşluklar yorumlanan sayfada da görünüyor.
Aradaki boşlukları kaldırmak için bir kaç yöntem var. Yatay menü oluşturmak için diğer bir yöntem olan float yöntemini denemek bunlardan biri
ul li{ float:left}
Diğer bir çözüm yolu ise aradaki boşlukları kaldırmak.
<ul> <li>deneme</li><li>olarak</li><li>bir örnek </li> </ul>
Fatih bir üçüncü alternatif çözümde benden olsun.
li tag'lerine arada oluşan boşluk kadar – margin tanımlaması ekleyebilir ve bu sorunun üstesinden gelinebilir. Ayrıca li tag'inin parent'ına aynı şekilde ilk elemanın – margin tanımlaması kadar +margin değeri eklemeyi unutmamak gerek.
(-) margin aradaki boşluklar için tam aradığım şeydi. teşekkürler.
bu alternatif kodlamayı gereksiz uzatıyor bence
bu alternatif kodlamayı gereksiz uzatır kanımca :)
Teşekkürler hocam
Evet fatih hocam.. Uğraş verdiğim sıralarda benimde karşıma bu tür bir hata çıkmıştı.. Çözümünün kolay olması bir yana bilmeyenler için faydalı olacaktır eminim :)
Blog yazılarımda İlgili yazılar başlıklı liste halinde hazırladığım yazılarda farketmiştim bunu. Dediğiniz gibi eski tarayıcılarda fark olmazken yenileri doğal bir boşluk oluşturuyor. Ben zaten bilinen bir şey olduğunu düşünmüştüm :)