Nasıl css kullanarak html içinde soldan sağa veri yazdırma

Question

Onun css için çok temel bir soru, ama css için yeni olduğum için, bunu yapamıyorum. Ben tarayıcısı

DATA1 
DATA2 
DATA3 
DATA4 

böyle yazdırmak varsayılan olarak

<div> 
    DATA1 
    </div> 

    <div> 
    DATA2 
    </div> 


    <div> 
    DATA3 
    </div> 

    <div> 
    DATA4 
    </div> 

gibi bir html var ama soldan sağa doğru sırayla bunu yazdırmak istiyorum.

DATA1  DATA2  DATA3  DATA4 

Answer 1

float.

div{ 
 
    float:left; 
 
    margin-right:5px; 
 
}

<div> 
 
    DATA1 
 
</div> 
 

 
<div> 
 
    DATA2 
 
</div> 
 

 

 
<div> 
 
    DATA3 
 
</div> 
 

 
<div> 
 
    DATA4 
 
</div>

veya display:inline-block;

div{ 
 
    display: inline-block; 
 
    margin-right: 5px; 
 
    
 
}

<div> 
 
    DATA1 
 
</div> 
 

 
<div> 
 
    DATA2 
 
</div> 
 

 

 
<div> 
 
    DATA3 
 
</div> 
 

 
<div> 
 
    DATA4 
 
</div>

kullanabilir ve aynı zamanda flex kullanabilirsiniz. Sadece bunu yapmak için başka bir yol eklemek için gidiyorum

div { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 
div>div{ 
 
    -webkit-flex: 1; /* Safari 6.1+ */ 
 
    -ms-flex: 1; /* IE 10 */  
 
    flex: 1; 
 
}

<div> 
 
    <div> 
 
    DATA1 
 
    </div> 
 

 
    <div> 
 
    DATA2 
 
    </div> 
 

 

 
    <div> 
 
    DATA3 
 
    </div> 
 

 
    <div> 
 
    DATA4 
 
    </div> 
 
</div>

Answer 2

, @mmativ tarafından gönderildi yöntemler mükemmel geçerlidir. Diğer yol tablo ve tablo hücresi kullanıyor.

Bir ana sınıf data ekledim ve display:table verdi. cell sınıf display:table-cell

HTML & CSS verildi

.data{ 
 
    display:table; 
 
} 
 

 
.cell{ 
 
    display:table-cell; 
 
    padding-left:10px; 
 
}

<div class="data"> 
 

 
    <div class="cell"> 
 
    DATA1 
 
    </div> 
 

 
    <div class="cell"> 
 
    DATA2 
 
    </div> 
 

 

 
    <div class="cell"> 
 
    DATA3 
 
    </div> 
 

 
    <div class="cell"> 
 
    DATA4 
 
    </div> 
 
    
 
    
 
</div>