Şurayı CSS İle Nasıl Hizalayabilirim Acaba?

19-05-2021, 11:07:58

Sitenin yanında bulunan filtredeki isimler uzayınca alt satıra iniyor ama simetrik olmadığı için çok çirkin duruyor, bu durumu nasıl değiştirebilirim? Yani alt satıra inse bile hizası bozulmasın istiyorum.

Site: https://sistemgereksinimleri.net/

19-05-2021, 11:14:06

#2

erbasaran

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

Sitenin yanında bulunan filtredeki isimler uzayınca alt satıra iniyor ama simetrik olmadığı için çok çirkin duruyor, bu durumu nasıl değiştirebilirim? Yani alt satıra inse bile hizası bozulmasın istiyorum.

Site: https://sistemgereksinimleri.net/

Hocam çok basitçe aşağıdaki stili eklerseniz düzelecektir.

.searchandfilter li[data-sf-field-input-type=checkbox] label {
    width: calc(100% - 16px);
}

19-05-2021, 11:36:46

#3

mustafasatirogl

@SkyGhostAir; kapsayıcısına display:flex verirsen istediğin görünüme ulaşırsın

19-05-2021, 14:05:51

#4

SkyGhostAir

Numaralar ayrı <span> içerisinde olduğu için display:flex; justify-content: space-between; align-items: center; kullandım çok daha iyi oldu, taşanı alt satıra indirmekle kalmayıp numarayı yanda tuttu, üstelik 2 satır olduğunda 2 satırın ortasında tuttu. Harika oldu.

19-05-2021, 16:31:04

#5

mustafasatirogl

Justify-content:space-between'a burada gerek yok. Herneyse sorun çözüldü o halde. Bu arada unutmadan display:flex candır

@SkyGhostAir;

19-05-2021, 18:05:21

#6

SkyGhostAir

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

Justify-content:space-between'a burada gerek yok. Herneyse sorun çözüldü o halde. Bu arada unutmadan display:flex candır

@SkyGhostAir;

Evet hocam daha öncede sizden display:flex ile ilgili çözüm içeren cevap almıştım

Ben halen flex'in nerelerde tam olarak kullanılması gerektiğini kavrayamadım.

19-05-2021, 20:27:37

#7

mustafasatirogl

Flex çok kapsamlı bir yapı, tam anlamıyla öğrendiğin zaman bir sürü olayı kolaylıkla halledebilirsin