Css 显示大于父HTML元素的HTML子项

我正在创建一个angular 2配方应用程序。但是我对html元素有一个问题。未排序的列表项（包含复选框）元素大于父UL元素。参见屏幕截图

另外，请参见我的HTML：-

<tr>
  <td>
      Ingredients
  </td>
  <td>
    <ul formControlName="ingredient_id" name="ingredient_id" class="form-control checkbox-grid" required>
      <li *ngFor="let ingredient of ingredients" value="{{ingredient.ingredient_id}}">
        <input type="checkbox" id="{{ingredient.ingredient_id}}" name="{{ingredient.ingredient_name}}" />
        <label for="{{ingredient.ingredient_name}}">{{ingredient.ingredient_name}}</label>
      </li>
    </ul>
  </td>
</tr>

1） 您是否尝试过为父ul提供宽度？ 2） 您的li具有float属性，因此您必须在末尾使用clear-tware

请参见css并替换您的代码：——

.checkbox-grid { 
  overflow: hidden;
  margin:0px -10px;
  clear: both 
}
.checkbox-grid:before {
  content: ' ';
  display: table 
}
.checkbox-grid:after {
  clear: both
}
.checkbox-grid li {
   display: block;
   float: left;
   width: 25%; 
   padding:0px 10px
}
.checkbox-grid li:nth-child(5n){
  clear: left
}

我终于解决了。看起来引导css覆盖了表单控件类元素的高度。引导css是：-

.form-control.checkbox-grid {
    overflow:hidden ;
    height: auto;
}

我刚将style.css改为Overwrite：-

请尝试澄清您的问题，并提供一个工作示例，作为代码片段/小提琴
.form-control {
    height: 34px;
}

.form-control.checkbox-grid {
    overflow:hidden ;
    height: auto;
}