离子角离子含量填充问题

Question

我正在开发我的第一个Ionic应用程序。 我从基本的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的差距让它看起来像他们的榜样？ 谢谢！

Answer 1

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

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

如果删除那个，则会得到确切的结果，而不是那里的示例选项按钮。

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

如果您需要那个，那么您需要定制的CSS。

希望这个能对您有所帮助 ！