用离子滚动改变离子列表项的css

Question

我正在使用Ionic和Angular开发一个应用程序，我正在尝试重写列表项的css以按照我想要的方式显示数据。

这就是我想要的样子：

但是我在设置图像之间的填充时遇到了一些问题，它根本不起作用。

还有自动高度，我正在使用ng-if是为了显示新闻与否，当没有显示新闻我有这个空div显示

这是我的代码：

 <div class="list">
        <div class="item item-divider">
          Teams
        </div>
      <div class="item" style="height:150px;"  ng-repeat="team in teams">
      <img ng-src="https://upload.wikimedia.org/wikipedia/en/thumb/4/47/FC_Barcelona_(crest).svg/1010px-FC_Barcelona_(crest).svg.png" style="position:absolute; top:10px; left:10px; width:25px; height:25px"  > 
   <p style="left:50px; position:absolute; color:black; font-size:16px; top:12px">{{team.name}}</p>          <p style="right:30px; position:absolute; top:12px"> Tout</p>
       <i class="icon ion-chevron-right" style="position:absolute; right:10px; color:grey; top:12px"></i>
      <ion-scroll direction="x" scrollbar-x="false" style="width:100%; position:absolute; top:50px" ng-if="team.news=='true'">
      <div style="height:85px; width:500px;  position:relative "  >
        <div style="width:110px; display: inline-block;  position:static; padding-right:5px"  ng-repeat="item in items">
         <img src="http://fr.starafrica.com/football/wp-content/blogs.dir/2/files/2015/07/sporever/272576_PALERME_LAZAAR_220215-615x340.jpg" style="height:65px; width:110px"> 
          <p style="font-size:9px; color:black">News1</p>
          </div>  


          </div>
      </ion-scroll>



  </div>  

这也是plunker DEMO

Answer 1

您可以将 padding-right 提供给img。

Answer 2

嗨现在你已经习惯了这个css我看到你的演示并建议你习惯这个css

.scroll > div > div + div {
    margin-left: 5px;
}

Answer 3

你可以做别人说过的话 试试这个。

.scroll img {
        padding-left: 2px;
    }

在这里演示：http://codepen.io/anon/pen/LVXeRy