2016-03-31 23 views
0

Bir proje üzerinde çalışırken, bazı standart satır içi blok öğeleri yaptı. Sayım ekranını doğru alana almak için negatif bir marj topladım. Eminim neden sadece kendi anlaşmasına yer vermeyeceğinden emin değilim. Sayım başlığı bir alan mı yoksa başka bir şey mi alıyor? Bunu neden yapmak zorunda olduğumu bilmek isterdim ve eğer ileride bunu yapmaktan kaçınmanın daha iyi bir yolu varsa ya da bunu doğru yapsaydım ve ne olduğunu nasıl tanımlayacağım diye ben de aynı şekilde yaptığımdan emin olabilirim gelecekte.Bu durumda neden negatif kenar boşluğu gereksinimi

https://jsfiddle.net/ybh9qz37/

.count-display { 
    height: 35px; 
    width: 65px; 
    background: black; 
    color: red; 
    display: flex; 
    float: left; 
    align-items: center; 
    border-radius: 5px; 
//why is this needed 
    margin-top: -60px; 
    margin-left: 40px; 
    font-family: Orbitron, sans-serif; 
    font-size: 200%; 
} 
+0

aşağıya doğru. Dolayısıyla negatif marj eklemek zorundasınız. – geeksal

+0

belki de yanlış satır içi bloğu anlıyorum ama katı düğme sağda olduğundan beri önemli değil mi? Ya da yanlış bir şekilde görselleştiriyorum –

+0

bu konu ile ilgili satır içi ile ilgili değil sadece benim cevabımı bakın. – geeksal

cevap

0

div bir sürü herhangi div düzenlemenin en iyi yolu grup subdivs etmektir.

Örneğin, sizin durumunuzda, farklı yüksekliklerin altında bir diğerine sahip 3 alt bölümleri var. Bu sorunların bir sürü neden olur, bu şemayı kullanmalısınız:

<div class="row2"> 
    // your left side div 
    <div class="left" style="display: inline-block;vertical-align: top;"> 
     <span class="count-title">Count</span> 
     <span class="count-display"><p>00</p></span> 
    </div> 
    // the right way is to create here <div class='right'> with similar styles as left   
    <span class="strict-button"> 
     <a rel="external" href="#button" class="button">Strict</a> 
     <span></span> 
    </span> 

</div 

Ve değiştirmek senin .count-title için:

.count-title { 
    display:block; 
} 

o

organize kolayca sorunsuz gelecekte yapışım uzatmak ve kaydedin Bu şekilde
0

Sanırım, şamandıranın nasıl çalıştığını daha iyi bilmelisiniz ve sizin durumunuzda niçin bir negatif marj gerektirdiğinin sebebini alacaksınız.

soruna ilişkin daha iyi anlamak olacağını Umarım bu başvurabilirsiniz

sizin `sıkı-button` sınıf` saymak-display` kaymıştır var hangi nedeniyle yüksekliğinin iyi bir miktar yaşıyor Everything You Never Know about css float

İlgili konular