Responsive menüde ufak sıkıntı

09-02-2018, 15:59:09

Kimlik doğrulama veya yönetimden onay bekliyor.

Öncelikle merhabalar.
HTML-CSS bir menüde sıkıntı yaşıyorum. https://jsfiddle.net/qwvs6gw5/ bu linkten göreceğiniz üzere menü yan yana butonlardan oluşuyor. Ancak ben bu menünün küçük(mobil) sayfalarda otomatik olarak aşağıya doğru alt alta dizilmesini istiyorum.
İstediğim menü aynen şu şekilde olacak: https://jsfiddle.net/rLkeum5w/ sağ alttaki output penceresini küçültüp büyülttüğünüzde butonların otomatik ekrana sığdığını göreceksiniz.
Yardımcı olacaklara şimdiden teşekkürler

09-02-2018, 16:08:18

#2

Oguzhanozuag

kapsayıcıdaki widthi ya yüzdeli şekilde vermelisiniz yada aşağıdaki gibi vermeyin Ayrıca menü yaparken float yerine display:inline-block; kullanırsanız daha iyi olacaktır. Eğer illaki width verecekseniz @media kullanımını araştırın. 57.satırdaki 2 classı şu şekilde değiştirirseniz sorun çözülür;
.navX{
margin:0 auto;
height:auto;
}
.navX li{
width:160px;
height:45px;
display:inline;
display:inline-block;
cursor: pointer;
transition:all 0.4s;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
}

09-02-2018, 17:15:25

#3

enescimen

Oguzhanozuag adlı üyeden alıntı: mesajı görüntüle

kapsayıcıdaki widthi ya yüzdeli şekilde vermelisiniz yada aşağıdaki gibi vermeyin Ayrıca menü yaparken float yerine display:inline-block; kullanırsanız daha iyi olacaktır. Eğer illaki width verecekseniz @media kullanımını araştırın. 57.satırdaki 2 classı şu şekilde değiştirirseniz sorun çözülür;
.navX{
margin:0 auto;
height:auto;
}
.navX li{
width:160px;
height:45px;
display:inline;
display:inline-block;
cursor: pointer;
transition:all 0.4s;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
}

hocam cevap ve yardım için teşekkürler. dediğiniz kodları girdim oldu. butonların arasında az boşluk kaldı ama sıkıntı değil.

09-02-2018, 18:03:41

#4

Oguzhanozuag

enescimen adlı üyeden alıntı: mesajı görüntüle

hocam cevap ve yardım için teşekkürler. dediğiniz kodları girdim oldu. butonların arasında az boşluk kaldı ama sıkıntı değil.

navX li ye margin-right:-4px; verirsen boşluklar düzelir.