html - 如何使用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。

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>