为什么文本脱离网格？元素用户界面

Question

我正在使用此Element UI组件 https://element.eleme.io/#/en-US/component/checkbox#checkbox-group

基本上是分组复选框，但我的细节是，在网格中使用它时，它会离开div

 <el-row>
          <el-form-item>
            <el-checkbox-group v-model="packageForm.premises.secundaryClassDefinitions" :disabled="isDisabled">
              <el-row>
                <el-col 
                   class="check-element" 
                   :span="12"
                   v-for="(item, index) in primaryClassCode" :key="index">
                    <el-checkbox 
                      :label="item.value"
                      :value="item.code">
                    </el-checkbox>>                
                </el-col>
              </el-row>
            </el-checkbox-group>
          </el-form-item>  
        </el-row>

在视觉上看起来像这样：

左侧是一个复选框，右侧是另一个复选框，因此您将看到左侧的文本离开该行并转到另一侧。

红色表示整个div，黄色表示包含文本的div，您可以看到它是开箱即用的。 我该怎么办？ 我已经将不同的属性应用于el-checkbox__label类的CSS

width: 50%;
display:inline-block;
float:left
word-break: break-word

但是它们不起作用。

Answer 1

您可以将“ display：flex”用于父级，将“ flex：1”用于子级。喜欢：

.parent {
  display: flex;
}

.child {
  flex: 1;
}