web-dev-qa-db-ja.com

ionic 2の開始と終了の境界のionic-listタグを削除します

開始と終了の境界線を削除したいだけです。私はこのプログラミング言語にとても慣れていません。リストを表示するために以下のコードを使用しています。

<ion-content>
<ion-list class="item">
  <ion-item href="#">
    Hello!
  </ion-item>
   <ion-item  href="#">
    Hello2
  </ion-item>

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

下記のスクリーンショットで強調表示されている赤い色相環の境界線を削除する必要があります。実行する方法？ enter image description here

angulartypescriptionic-frameworkionic2ionic3
8
Yalamandarao

1つの方法は、次のようにion-list要素にno-linesを追加することです。

<ion-list no-lines>...</ion-list>

しかし、それはアイテムの行も削除します。したがって、下部のその行のみを削除するために、次のスタイルルールを追加できます。

.md ion-list > .item:last-child, 
.md ion-list > .item-wrapper:last-child .item,
.wp ion-list > .item:last-child, 
.wp ion-list > .item-wrapper:last-child .item,
.ios ion-list > .item:last-child, 
.ios ion-list > .item-wrapper:last-child .item {
    border-bottom: none;
}
18
sebaferreras

私のために働いた解決策は

.list-ios>.item-block:first-child {
    border-top: none;
}
.list-ios>.item-block:last-child {
    border-bottom: none;
}

コメントで述べたように、以下はAndroidバージョン

.list-md>.item-block:first-child {
    border-top: none;
}
.list-md>.item-block:last-child {
    border-bottom: none;
}
8
Ifeanyi Chukwu

@IfeanyiChukwuの答えはそれをすべて行います。

私のために働いた解決策は

.list-ios>.item-block:first-child {
    border-top: none;
}
.list-ios>.item-block:last-child {
    border-bottom: none;
}

コメントで述べたように、以下はAndroidバージョン

.list-md>.item-block:first-child {
    border-top: none;
}
.list-md>.item-block:last-child {
    border-bottom: none;
}
0
Victor Tavares