html中盒子横向排列的代码

在HTML中，盒子（box）是指元素的内容和边框所构成的矩形区域。如果要把多个盒子横向排列，可以使用CSS中的display属性和float属性。

.box {
      display: inline-block;
      float: left;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      margin: 10px;
}
    

首先，创建一个class为box的CSS样式。其中，display属性值为inline-block，表示元素将呈现为内联块级元素，可以横向排列；float属性值为left，表示元素浮动在左侧；width和height属性值分别为100px，表示盒子的宽度和高度；border属性值为1px solid black，表示盒子边框为1像素的黑色实线；margin属性值为10px，表示盒子外边距为10像素。

使用以上CSS样式，在HTML中创建多个盒子，即可实现横向排列效果：

div class="box">
    /div>
    div class="box">
    /div>
    div class="box">
    /div>
    

以上代码设置的是三个盒子，可以根据实际需要增减数量。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！