html - 如何在 ng-repeat block 元素之间添加空格？

Question

我使用 ng-repeat 将服务器日志作为数据 我正在尝试使用边距添加空间，但它只对最后一项起作用。如何在传入日志的每个 span 元素之间添加空格。

主.css

.messageMargin {
    margin-top: 5px;
    margin-bottom: 5px;
}

main.html

<ul style="list-style: none;">
    <li ng-repeat="message in event.data track by $index" ng-class="{lastItem: $last}"><span class="messageMargin">{{message.value}}</span>
    </li>
</ul>

Answer 1

您需要制作您的 <span>作为 block 级元素，以便在 <span> 前后各有一个新行.将您的 CSS 更改为

.messageMargin {
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
}

或者，如果messageMargin在您不想使其成为 block 级元素的其他地方使用，然后将 css 添加为内联:

<span  class="messageMargin" style="display:block;">{{message.value}}</span>