如何在html中使用css從左到右打印數據

Question

它是一個非常基本的CSS問題，但是由於我是css的新手，我無法做到這一點。 我有這樣

<div> 
    DATA1 
    </div> 

    <div> 
    DATA2 
    </div> 


    <div> 
    DATA3 
    </div> 

    <div> 
    DATA4 
    </div> 

默認的HTML它打印這樣的瀏覽器

DATA1 
DATA2 
DATA3 
DATA4 

，但我想打印在左到右的順序。

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>

，或者您可以使用display:inline-block;

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

<div> 
 
    DATA1 
 
</div> 
 

 
<div> 
 
    DATA2 
 
</div> 
 

 

 
<div> 
 
    DATA3 
 
</div> 
 

 
<div> 
 
    DATA4 
 
</div>

，你也可以使用flex。

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方法是非常有效的。另一種方式是使用表和表格。

我加了一個主類data並給了它display:table。該cell班則display:table-cell

HTML CSS &

.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>