Android 如何将选项卡栏设置为标题？

我试图在标题下添加选项卡栏，以产生如下结果：

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
  <a class="tab-item active" href="#">
    <i class="icon ion-home"></i>
    Test
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-star"></i>
    Favorites
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-gear-a"></i>
    Settings
  </a>
</div>

但是没有运气

选项卡栏显示在标题下，但有难看的边距（见图），不是静态的，是滚动视图

有人能告诉我我做错了什么吗

谢谢你的帮助

版面的模板代码如下：

<ion-view title="{{ 'RESULTS_BY_DAY' | translate }}">

    <ion-nav-buttons side="left">
        <button class="button button-icon icon  ion-chevron-left" ui-sref="home">
        </button>
    </ion-nav-buttons>

    <ion-nav-buttons side="right">
        <button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart">
        </button>
    </ion-nav-buttons>

  <ion-content class="padding" ng-controller="DailyListCtrl">

<div class="bar bar-header bar-light">
  <!--tabbar-->
    <div class="tabs-striped tabs-background-positive tabs-light tabs-icon-left">
        <div class="tabs">
            <a class="tab-item active" ui-sref="daily-list" href="/#/daily-list">
                {{ 'DAYS' | translate }}
            </a>
            <a class="tab-item " ui-sref="weekly-list" href="/#/weekly-list">
                {{ 'WEEKS' | translate }}
            </a>
            <a class="tab-item " ui-sref="monthly-list" href="/#/monthly-list">
                {{ 'MONTHS' | translate }}
            </a>
        </div>
    </div>
</div>


      <!--WRITEOUT OVERAL STATS FOR DAYS -->
      <ion-list class="list" ng-init="setDateRange('today');" >

          <!--IF NO ITEM IS FOUND -->
          <ion-item class="listCenter" ng-if="listData.length == 0 || listData.length == null">
              <h2>{{ 'NO_DATA_FOUND' | translate }}</h2>
          </ion-item>

          <ion-item class="item" ng-repeat="listDataItem in listData">
                  <div class="listDateTimeBlock">
                    <div>{{listDataItem.DATE_FROM_DD}}</div>
                    <div>{{listDataItem.DATE_FROM_MM}}</div>
                  </div>
                  <div class="listSuccessRateBlock">
                    <h3>{{ 'APPOINTMENT_SUCCESS_RATE' | translate }}: {{listDataItem.SUCCESS_RATE}} %</h3>
                    <h4>{{ 'SUCCESS_RATE_SINCE_START' | translate }}: {{listDataItem.SUCCESS_RATE_SINCE}} %</h4>
                    <h4>{{ 'MY_DEFICIT' | translate }}: {{listDataItem.DEFICIT}} %</h4>
                  </div>
                  <div class="listInformationBlock">
                    <h3>{{ 'DIALS' | translate }} : {{listDataItem.DIALS_CNT}}</h3>
                    <h3>{{ 'CONVERSATIONS' | translate }} : {{listDataItem.CONVERS_CNT}}</h3>
                    <h3>{{ 'APPOINTMENTS' | translate }} : {{listDataItem.APPT_CNT}}</h3>
                  </div>
          </ion-item>

          <ion-infinite-scroll
                  ng-if="canLoadMore"
                  icon="ion-loading-c"
                  distance="10%"
                  on-infinite="setDateRange('past');">
          </ion-infinite-scroll>

      </ion-list>
  </ion-content>



</ion-view>

{{‘未找到数据’{翻译}
{{listDataItem.DATE_FROM_DD}
{{listDataItem.DATE_FROM_MM}
{{'APPOINTMENT_SUCCESS_RATE'{124; translate}}:{{{listDataItem.SUCCESS_RATE}}%
{{'SUCCESS_RATE_SINCE_START'{124; translate}}:{{{listDataItem.SUCCESS_RATE_SINCE}}%
{{‘我的赤字’|翻译}}：{{{listDataItem.defect}}%
{{'DIALS'| translate}}:{{{listDataItem.DIALS_CNT}
{{'CONVERSATIONS'| translate}}:{{{listDataItem.CONVERS_CNT}
{{‘约会’|翻译}：{{{listDataItem.APPT_CNT}

参考爱奥尼亚官方网站上的文档：

确保选项卡标题div中有.tabs top，如下所示：

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
  <a class="tab-item active" href="#">
    <i class="icon ion-home"></i>
    Test
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-star"></i>
    Favorites
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-gear-a"></i>
    Settings
  </a>
</div>

然后用包装和添加内容部分。在类的顶部有选项卡，如：

<ion-content class="padding has-tabs-top">
    ...your content...
</ion-content>

…您的内容。。。

---

希望这能有所帮助。

你能分享一下你的代码生成的屏幕截图吗？你好，我刚刚更新了我的问题。我相信是内容包装器上的class=padding做的。你能删除吗？我删除了这个类，但结果是一样的。