离子角离子含量填充问题

问题描述：

我正在开发我的第一个离子应用程序。我从基本的sidemenu模板开始。离子角离子含量填充问题

$ ionic start myApp sidemenu

从那里，我创建了一个简单的页面与列表，它看起来像这样...

<ion-view view-title="Players"> 
    <ion-nav-buttons side="right"> 
    <button class="button button-positive" ng-click="doSomething()"> Learn More</button> 
    </ion-nav-buttons> 
    <ion-content> 
    <ion-refresher 
     pulling-text="Pull to refresh..." 
     on-refresh="doRefresh()"> 
    </ion-refresher> 
    <ion-list can-swipe="listCanSwipe"> 
     <ion-item class="item-icon-left" ng-repeat="player in players" href="#/app/players/{{player.id}}"> 
      <i class="icon ion-ios-contact"></i> 
      {{player.fname}} {{player.lname}} 
      <span class="item-note"> 
      {{player.city}}, {{player.state}} 
      </span> 
      <ion-option-button class="button-positive" ng-click="share(item)"> 
      [Option 1] 
      </ion-option-button> 
     </ion-item> 
    </ion-list> 
    </ion-content> 
</ion-view>

我的问题是关于具体的<span class="item-note">部分。我从Ionic的例子中得到了这个示例代码：http://ionicframework.com/docs/components/#item-icons。在他们的例子中，你可以看到注释文本一直到右边，但在我的页面中有很多填充。我认为源，它似乎是从这里来的......

.item-complex .item-content, .item-radio .item-content { 
    position: relative; 
    z-index: 2; 
    padding: 16px 49px 16px 16px; 
    border: none; 
    background-color: #fff; 
}

我知道我可以写我自己的CSS来覆盖这一点，但我宁愿它只是工作就像在他们的榜样，没有我与它修修补补。我在标记中做错了什么？这是一个错误？我如何摆脱右侧49px的空白，看起来像他们的例子？谢谢！

答

在这种情况下，您使用的模板模板是</ion-option-button>。

因此，它从离子项目的右侧添加额外的填充。

如果您删除那一个，您会得到确切的结果，请在example选项按钮不存在。

由于这个.item-radio类被添加。

如果你需要这样一个可能是你需要你的定制的CSS。

希望这会帮助你！

离子角离子含量填充问题

相关推荐