Checkbox'un yanına yazı hizalanmıyor.

25-03-2019, 10:26:37

Merhaba arkadaşlar,

Şu Checkbox'un https://codepen.io/ilwcss/pen/OEeGQa yanına yazı eklediğimde altına iniyor.
Biraz uğraştım beceremedim yardımcı olursanız sevinirim.

25-03-2019, 10:32:08

#2

Kei

<div class="checkbox"><p class="hiza">Deneme</p>
  <input type="checkbox"/>
  <div class="checkbox-inner">
    <div class="checkbox-marker"></div>
  </div>
</div>
<br><br>
<div class="checkbox"><p class="hiza">Deneme</p>
  <input type="checkbox" checked/>
  <div class="checkbox-inner">
    <div class="checkbox-marker"></div>
  </div>
</div>

.hiza{
   
position: absolute;
right:40px;

}

body
  padding 100px

.checkbox
  position relative
  width 24px  
  height 14px
 
  input
    width 24px  
    height 14px
    opacity 0
   
  input:focus + .checkbox-inner
    box-shadow 0 0 0 2px rgba(#2B96F1, 0.3)
   
  input:checked + .checkbox-inner
    background #2B96F1
   
    .checkbox-marker
      transform translateX(10px)
   
.checkbox-inner
  position absolute
  top 0
  background rgba(0,0,0,0.1)
  border-radius 15px
  pointer-events none
  height 14px
  width 24px
 
.checkbox-marker
  height 10px
  width 10px
  border-radius 50%
  background white
  position absolute
  left 2px
  top 2px
  box-shadow 0 0 0 1px rgba(black, 0.1)
  transition all 100ms ease

25-03-2019, 10:45:25

#3

infoakademi

Maalesef olmadı altına düşüyor.

25-03-2019, 10:46:14

#4

Kei

nereye eklemeye çalışıyorsun hocam şuan bu kod ile soluna düşürür oradaki css ile çakışabilir

25-03-2019, 11:10:39

#5