HTML子项看起来比父HTML元素大

Question

我正在创建一个有角度的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>

请参阅我的.css： -

.checkbox-grid li { display: block; float: left; width: 25%;}
.checkbox-grid {
    overflow: hidden;
}

Answer 1

1）你试过给父母的宽度吗？ 2）你的li有float属性，所以你必须在最后使用clear

Answer 2

请参阅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
}


.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
}

Answer 3

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

.form-control {
    height: 34px;
}

我刚刚将style.css改为over-write： -

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