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