[英]How to remove space/shadow between items in a list
I have this template consisting on a list of cards: 我有一个包含卡片清单的模板:
<div class="list">
<div class="card" ng-repeat="event in eventsSportsDay21">
<div class="item item-avatar item-icon-right" ng-click="toggleEvent(event)">
<!--ng-style="{'background-color': event.eventColor }">-->
<img src={{event.eventIcon}}>
<i class="icon" ng-class="isEventShown(event) ? 'ion-minus' : 'ion-plus'"></i>
<h2><b>{{event.eventTitle}}</b></h2>
<p><b>{{event.eventHour}}</b></p>
</div>
<div class="item item-body" ng-hide="!isEventShown(event)">
<div>
<!--<img src="/img/alfarero.jpg" width="30%" style="float: left; margin: 0 20px 20px 0;" ng-show="false">-->
<p ng-bind-html="event.eventText | hrefToJS"></p>
</div>
<div>
<!--<p style="clear: both">-->
<br/>
<div>
<i class="icon ion-map balanced" style="font-size: 25px;"></i> <p ng-bind-html="event.eventPlace | hrefToJS" style="display:inline"></p>
</div>
<!--</p>-->
<!--<div>-->
<div ng-show="event.eventPhone">
<i class="icon ion-information-circled balanced" style="font-size: 25px;"></i> <p ng-bind-html="event.eventPhone | hrefToJS" style="display:inline"></p>
</div>
<!--</div>-->
</div>
</div>
</div>
</div>
It does its job but I want to tweak it a bit visually. 它可以完成它的工作,但我想在视觉上进行一些调整。 First, I would like to remove shadows at the bottom of each card.
首先,我想去除每张卡底部的阴影。 Second, how do I eliminate space between cards?.
第二,如何消除卡之间的空间? Is there a way other than CSS?.
除了CSS还有其他方法吗?
This is what I get: 这是我得到的:
Thanks! 谢谢!
It seems that the problem is wanting to use cards when they are not needed. 似乎问题是想要在不需要卡时使用它们。 Changing to:
更改为:
<div class="list">
<div ng-repeat="event in eventsSportsDay21">
gives the desired behaviour. 提供所需的行为。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.