在ionic 之间添加自定义规则

I am trying to put a custom horizontal rule between the <ion-item>s in my list.

我试图在我的列表中的之间放置一个自定义水平规则。

My CSS works fine with <ion-list> except that <ion-list> adds its own rules which I don't want. I just want my custom rule.

我的CSS与一起工作正常，只是添加了我自己不需要的规则。我只想要我的自定义规则。

If I try using <ion-list no-lines> (to remove the rules that <ion-list> adds automatically my CSS doesn't work any more, and I don't get my custom rules.

如果我尝试使用（为了删除自动添加的规则，我的CSS不再起作用，而且我没有得到我的自定义规则。

My CSS is:

我的CSS是：

.my-item {
  border-style:solid;
  border-bottom-width: 11px;
  border-bottom-color: black;
}

My HTML is:

我的HTML是：

<ion-list>
  <ion-item class="my-item>Something</ion-item>
  <ion-item class="my-item>Something Else</ion-item>
</ion-list>

ADDED MY REAL CODE

添加我的真实代码

In case this helps here is the actual code I am using:

如果这有帮助，这里是我使用的实际代码：

page-my-plans {

    }

    .pu-my-plans-plus-circle {
      display: block;
      //border: 2px solid white;
      background-color: $pu-orange;
      border-radius: 50%;
      height: 38px;
      width: 38px;
    }

    .pu-my-plans-plus-circle span {
      font-size: 38px;
      font-weight: 100;
      color: white;
      position: absolute;
      top: -7px;
      left: 8.5px;
    }
    .pu-plan-addButton {
      font-size: 30px;
      margin-right: 14px;
      margin-top:-2px;
    }


    .pu-section-list-item{
      color: black;
      font-weight:$pu-item-font-weight;
      font-size:$pu-item-font-size;
      padding-left:20px;
      padding-right:0px;
      margin-bottom: 4px;
    }
    .item{
      background: transparent !important;
    }


    // THEMING CSS
    // ===========
    //
    .pu-my-plans-background {
      background-image: url("../assets/img/PU_Light_BG_1.png");
      background-size: cover !important;
    }
    .pu-my-plans-item {
      border: none;
      border-bottom: 11px solid black;
    }
    .pu-my-plans-plan-date {
      color: black; //$pu-orange;
      font-size: 11px;
      font-weight: 200;
    }

<ion-content class="pu-my-plans-background">

  <div *ngIf="hasPlans">
    <ion-list no-lines class="pu-item-list">
      <!--<ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">-->
        <ion-item-sliding *ngFor="let plan of plans; let i = index" >
          <ion-item class="pu-section-list-item pu-my-plans-item" (click)="editPlan(plan.id, plan.rev, plan.title, i)">
            {{ plan.title }}
            <br>
            <span class="pu-my-plans-plan-date">{{ plan.updated}}</span>
            <button *ngIf="plan.important" ion-button clear item-right>
              <ion-icon name="ios-alert-outline"></ion-icon>
            </button>
          </ion-item>
          <ion-item-options side="right">
            <button ion-button color="danger" (click)="deletePlan(plan.id, plan.rev)">
              <ion-icon name="delete"></ion-icon>
              Delete
            </button>
          </ion-item-options>
          <div class="xxx">SOME TEXT</div>
        </ion-item-sliding>
      <!--</ion-item-group>-->
    </ion-list>
  </div>

</ion-content>

With this code my attempts to get a border rule fail. If I add no-lines to <ion-list> my border works but I also get the lines that <ion-list> produces.

使用此代码，我尝试获取边框规则失败。如果我向添加无线，我的边框可以工作，但我也得到产生的线。

This is what it looks like with the code above:

这是上面代码的样子：

If I take away no-rules it looks like this:

如果我拿走没有规则，它看起来像这样：

There is a rule at the bottom of the list and the last item does not have the border I am trying to apply.

列表底部有一条规则，最后一项没有我尝试应用的边框。

2 个解决方案

#1

Just preface your own border with a reset.

只需在重置前面加上自己的边框。

.my-item {
    border: none;
    border-bottom: 11px solid black;
}

Edit:

编辑：

Ionic 2's ios styles also contain a rule, specific to the last child and it's border, which is what needs to be overridden here.

Ionic 2的ios样式还包含一个特定于最后一个孩子及其边界的规则，这是需要在此处覆盖的内容。

.list-ios>.item-block:last-child, .list-ios>.item-wrapper:last-child .item-block { 
    border-bottom: .55px solid #c8c7cc; 
}

#2

I can help you, but i need to acces source code. http://view.ionic.io/

我可以帮到你，但我需要访问源代码。 http://view.ionic.io/

#1