无序列表中的外部项目符号点

Question

我有以下代码：

<ul style="columns: 3; -webkit-columns: 3; -moz-columns: 3; display: list-item; list-style-position: inside">
  <li ng-repeat="item in $ctrl.recipeModel.ingredients | orderBy: 'itemOrderId' track by item.id" ng-form="ingedientForm">
    {{ item.quantity }} {{ (item.unit + (item.preparation ? ', ' + item.preparation : '')) }} <small ng-if="item.quantityModifier">{{item.quantityModifier}}</small> {{ ::item.getFoodOrChildRecipe().name }}
  </li>
</ul>

它正在按预期工作，除了列表中的第一项只是一个后面没有文字的项目符号。第一个项目符号点之后的其余列表看起来应该是标准的li格式。

如何摆脱这个要点？