elementui相邻选择器导致第二个元素产生左边距

功能介绍及最初版本

1.该功能为一个多选框，选项数量以及内容不确定，由后台数据动态渲染。

2.代码实现

需要注意的是，因为多选框的数量不固定，为了防止多选框超出容器，为容器摄设置最大高度，

当元素的内容超出其垂直高度时，浏览器会自动添加垂直滚动条。

           <div style="max-height: 280px;overflow-y: auto;"> 
              <el-checkbox-group v-model="checkedPlaces" @change="handleCheckedPlacesChange">
              <el-checkbox v-for="place in tableDataAlarmPlace" :label="place" :key="place">{{ place }}</el-checkbox>
            </el-checkbox-group>
            </div>  

3.效果如图

可以看到每一个多选项的大小和位置不固定，可观性差

应用flex布局以及设置多选框大小

1.设置多选框大小为固定大小，超出部分hidden

.checkbox-item{
  margin:1px 0;
  width: 250px; 
  overflow: hidden; 
  white-space: nowrap; //禁止换行
}

效果如图

elementUi相邻选择器

问题为：element相邻选择器会判断组件是不是连续使用，如果是的话就给后边的每个都加一个左边距，让他们不至于挨在一起，然后如果给每一个按钮或者是多选框都加上一个div或者其他标签包裹的话他们就不会被检测到连在一起了，然后就不会给从第二个开始的元素加左边距了。

解决方法1：设置checkbox-item的样式，将左边距设置为0

解决方法2：使用div对checkbox-item进行包裹，代码如下

 <div style="margin-top:15px; max-height: 280px;overflow-y: auto;">
              <el-checkbox-group v-model="checkedPlaces" @change="handleCheckedPlacesChange" class="checkbox-group">
                <template  v-for="place in tableDataAlarmPlace">
                  <div class="boxRow">
                    <el-checkbox :label="place" :key="place" border  class="checkbox-item"> 
                   {{place}}</el-checkbox>
                  </div>
              </template>
              </el-checkbox-group>
            </div>

行布局以及设置元素占比

width: calc(50% - 1px); 是一个 CSS 属性值，表示元素的宽度为其父容器宽度的 50% 减去 1 像素。具体含义如下：

• 50%：表示宽度是父元素宽度的一半。
• - 1px：从这个宽度中减去 1 像素，通常是为了留出一些间隔或处理边距问题。

.boxRow{
  width: calc(50% - 1px); /* 每个元素占据一半宽度 */
}
.checkbox-group {
  display: flex;
  flex-direction: row;  /* 改为行布局 */
  flex-wrap: wrap;      /* 允许换行 */

}

设置每个元素占据一半宽度，按行布局，允许换行，效果如下，就完成啦。

注意

div包裹着checkbox时，如果给checkbox设置最大宽度，那么由于div的包裹，显示在页面上的会是实际的宽度，不利于页面的整齐。所以应该设置checkbox的宽度，这样可以保证每个div容器的大小一致，就可以实现整齐的效果了。