In the front-end html, let two or more divs be displayed in one line, and use style to add css styles to the divs

---

foreword

DIV is a positioning technology in cascading style sheets, and its full name is DIVision, which is division. This is sometimes called a layer. DIV is also called divisibility in programming, that is, an integer that only has a quotient. The DIV element is an element used to provide structure and background for block-level content in an HTML (an application under the Standard Universal Markup Language) document.
We know that by default, each div is displayed on a single line, so how to display multiple divs on one line?

---

1. How to display multiple divs in one row

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

Show results: