lostyazilim
tr.link

Düğmeleri Satıra Sığdırma

8 Mesajlar 2.771 Okunma
acebozum
tr.link

wpuzman wpuzman WordPress Developer Kullanıcı
  • Üyelik 13.01.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Yazılım
  • Konum Trabzon
  • Ad Soyad B** M**
  • Mesajlar 2771
  • Beğeniler 293 / 949
  • Ticaret 33, (%100)
Merhaba herkese iyi forumlar.

Kendi wordpress sitem için sosyal paylaşım düğmeleri yaptım.

Düğmeleri satıra ne yaptıysam sığdıramadım. Bunun bir yolu var mıdır?

Buradan bakabilirsiniz.

Yapmak istediğim, düğmelerin genişliğni satıra tam sığacak şekilde uzatmak.

Yardımcı olacak arkadaşlara şimdiden teşekkür ederim.
 

 

elektronikssl
webimgo

KadirCeyhan KadirCeyhan WM Aracı Kullanıcı
  • Üyelik 23.10.2016
  • Yaş/Cinsiyet 27 / E
  • Meslek Öğrenci
  • Konum Denizli
  • Ad Soyad K** C**
  • Mesajlar 689
  • Beğeniler 0 / 203
  • Ticaret 6, (%100)
Butonları div'in içine al. Div'e display: inline ve width:100% ver. 5 buton var diyelim. Her birine width:20% ver.
wpuzman

kişi bu mesajı beğendi.

wpuzman wpuzman WordPress Developer Kullanıcı
  • Üyelik 13.01.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Yazılım
  • Konum Trabzon
  • Ad Soyad B** M**
  • Mesajlar 2771
  • Beğeniler 293 / 949
  • Ticaret 33, (%100)
KadirCeyhan hocam div içerisine aldım. sosyal-butonlar diye class verdim. css i şu şekilde yazdım. Birşey değişmedi.

.sosyal-butonlar {
display: inline;
width:100%;
}

.facebookbo, .twitterbo, .googleplusbo, .whatsappbo, .pinterestbo, .linkedin.bo {
widht:20%;
}
 

 

KadirCeyhan KadirCeyhan WM Aracı Kullanıcı
  • Üyelik 23.10.2016
  • Yaş/Cinsiyet 27 / E
  • Meslek Öğrenci
  • Konum Denizli
  • Ad Soyad K** C**
  • Mesajlar 689
  • Beğeniler 0 / 203
  • Ticaret 6, (%100)
100 / 6 = 16.6666666667.

20 değil 16.6666666667 değeri girin.

Ek olarak : Class = linkedinbo, ama Siz linkedin.bo olarak yazmışsınız.

Ek olarak : Buyrun çıktısı : http://prntscr.com/eb1nfq
wpuzman

kişi bu mesajı beğendi.

wmaraci
wmaraci

wpuzman wpuzman WordPress Developer Kullanıcı
  • Üyelik 13.01.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Yazılım
  • Konum Trabzon
  • Ad Soyad B** M**
  • Mesajlar 2771
  • Beğeniler 293 / 949
  • Ticaret 33, (%100)
KadirCeyhan Hocam whatsapp olanı masaüstü sitelerden gizlemiştim. Yani görünürde 5 tane var.
Mobil için farklı bir css yazdım onda sorun yok.

%20 yapınca birisi alta geçiyor. 16.6666666667 yapınca da sağdan biraz boşluk kalıyor.
 

 

KadirCeyhan KadirCeyhan WM Aracı Kullanıcı
  • Üyelik 23.10.2016
  • Yaş/Cinsiyet 27 / E
  • Meslek Öğrenci
  • Konum Denizli
  • Ad Soyad K** C**
  • Mesajlar 689
  • Beğeniler 0 / 203
  • Ticaret 6, (%100)
.sosyal-butonlar {text-align: center !important}
.sosyal-butonlar > a {width:16.6666666667% !important}

6 Buton İçin Yukadaki CSS kafi olacaktır.
5 Buton İçin 20% Yazmanız Yeterli.
 

 

wpuzman wpuzman WordPress Developer Kullanıcı
  • Üyelik 13.01.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Yazılım
  • Konum Trabzon
  • Ad Soyad B** M**
  • Mesajlar 2771
  • Beğeniler 293 / 949
  • Ticaret 33, (%100)
KadirCeyhan 20 yapınca aşağıdaki gibi oluyor.



18 yapınca tam sığıyor ama ekranı biraz küçültünce bozuluyor yine.
 

 

wpuzman wpuzman WordPress Developer Kullanıcı
  • Üyelik 13.01.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Yazılım
  • Konum Trabzon
  • Ad Soyad B** M**
  • Mesajlar 2771
  • Beğeniler 293 / 949
  • Ticaret 33, (%100)
Aradaki boşluklar silinerek sorun düzeltilmiştir.
.sosyal-butonlar > a {
margin-right: -18px;
width:20%;
}
 

 

wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al