前端html中让两个或者多个div在一行显示，用style给div加上css样式

文章目录

• 前言
• 一、怎么让多个div在一行显示

---

前言

DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。

我们知道，默认情况下每个div都是单独一行显示的，那么怎么让多个div在一行显示呢？

---

一、怎么让多个div在一行显示

<div style="display:flex;font-weight:bold ">图示：</div>
<div style="display:flex;font-weight:bold ">
  <div style="float: left;margin-right: 38px;">格口:</div>
  <div style="background:#7ea9dc;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">正常</div>
  <div style="background:gray;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">禁用</div>
  <div style="background:orange;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">集包</div>
  <div style="background:red;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">故障</div>
  <div style="background:yellow;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">装货量</div>
</div>
<div style="display:flex;font-weight:bold">
  <div style="float: left;margin-right: 38px;">小车:</div>
  <div style="background:#44FF8C;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">正常</div>
  <div style="background:red;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">故障</div>
</div>
<div style="display:flex;font-weight:bold">
  <div style="float: left;margin-right: 20px;">供件台 :</div>
  <div style="background:#44ff8c;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">运行</div>
  <div style="background:#b195d2;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">待机</div>
  <div style="background:red;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">故障</div>

</div>
<div style="display:flex;font-weight:bold">
  <div style="float: left;margin-right: 10px;">直线电机:</div>
  <div style="background:#44FF8C;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">正常</div>
  <div style="background:orange;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">告警</div>
  <div style="background:red;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">故障</div>
</div>
<div style="display:flex;font-weight:bold">
  <div style="float: left;margin-right: 38px;">紧停:</div>
  <div style="background:gold;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">正常</div>
  <div style="background:red;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">按下</div>

</div>
<div style="display:flex;font-weight:bold">
  <div style="float: left;margin-right: 38px;">电刷:</div>
  <div style="background:#44FF8C;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">正常</div>
  <div style="background:red;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">故障</div>
</div>
<div style="display:flex;font-weight:bold">
  <div style="float: left;margin-right: 20px;">灰度仪 :</div>
  <div style="background:#44FF8C;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">正常</div>
  <div style="background:red;width:15px;height:15px;float: left;margin-right: 5px;margin-top: 4px;"></div>
  <div style="float: left;margin-right: 15px;">故障</div>
</div>

显示结果：