问题描述
我正在使用此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
但是它们不起作用。
解决方法
您可以将“ display:flex”用于父级,将“ flex:1”用于子级。喜欢:
.parent {
display: flex;
}
.child {
flex: 1;
}