如何使用css在html中从左到右打印数据

Question

这是一个非常基本的css问题，但由于我是css的新手，我无法做到。 我有一个类似

的HTML

  <div>
    DATA1
  </div>

  <div>
    DATA2
  </div>


  <div>
    DATA3
  </div>

  <div>
    DATA4
  </div>

默认情况下，它在浏览器中打印如下

DATA1 
DATA2
DATA3
DATA4

但我想按照从左到右的顺序打印它。

DATA1     DATA2     DATA3     DATA4

Answer 1

您可以使用float。

＆＃13;

＆＃13;

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

＆＃13;

<div>
  DATA1
</div>

<div>
  DATA2
</div>


<div>
  DATA3
</div>

<div>
  DATA4
</div>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

<div>
  DATA1
</div>

<div>
  DATA2
</div>


<div>
  DATA3
</div>

<div>
  DATA4
</div>

＆＃13;

＆＃13;

＆＃13;

您也可以使用flex。

＆＃13;

＆＃13;

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

＆＃13;

<div>
  <div>
    DATA1
  </div>

  <div>
    DATA2
  </div>


  <div>
    DATA3
  </div>

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我只想添加另一种方法来实现这一点，@mmativ发布的方法完全有效。另一种方法是使用表和 table-cell 。

我添加了一个主要课程data，然后给了display:table。 cell课程已获得display:table-cell

HTML＆amp; 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>