简体   繁体   中英

How do I use CSS in ion-list, ion-item

I am developing an app and I am getting data from JSON and it works well, but my problem is that I don't know how to use CSS style using the directive. Below I am showing the code. The second code is the code that the css works.

<!-- With Json </!-->

<ion-list>  
    <ion-item>

       <a class="item item-avatar" ng-repeat="x in names|orderBy:'Name'"  href="#">
          <img ng-src="{{x.Image}}">
          <h2>{{x.Name}}</h2>
          <p>  {{x.Local}}</p>
        </a>

    </ion-item>
</ion-list> 


<!-- example static, without json, css works good  </!--> 
<div class="list" id="inicioPalestrantes" >
   <a class="item item-avatar" id="palestrantes" href="#">
     <img src="Fiona.jpg">
     <h2>Fiona Doohan</h2>
     <p> UDC, Dublin, Ireland </p>
   </a>
</div>

You need the id selector # better use the class instead of id for your CSS rules.

.list .item {
  background-color: #F0F8FF;
  border-width: 1px;
  border-style: ridge;
  border-color: #C0C0C0;
}

.list {
  margin-top:0%;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM