如何删除搜索栏和项目之间的空间//如何定位绿色按钮

Question

我有一个问题，我实现了一个搜索栏，现在栏和内容（配置文件）之间有一个空格。我怎样才能摆脱这个空间？我知道应该有要搜索的项目，但我有其他项目，配置文件。我是否必须在那里实现空间。

如何将绿色按钮放在右侧中央。我尝试了保证金但是没有用。

HTML：

<ion-header>
  <ion-navbar color="rank">
    <ion-title>
      friends
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <ion-content>
  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  <ion-list>
    <ion-item *ngFor="let item of items">
      {{ item }}
    </ion-item>
  </ion-list>
</ion-content>


<ion-list>
  <ion-item>

 <button ion-button color="rank" round>Add </button>
    <ion-avatar item-start>
      <img src="img/fri.jpg">
    </ion-avatar>
    <h1>JanePrincess</h1>
    <h3>Iceland, Reykjavik </h3>




  </ion-item>

   <ion-item>
    <ion-avatar item-start>
      <img src="img/hot.jpg">
    </ion-avatar>
    <h1>Dean</h1>
    <h3>Iceland, Reykjavik </h3>



  </ion-item>

   <ion-item>
    <ion-avatar item-start>
      <img src="img/top.jpg">
    </ion-avatar>
    <h1>Wayne</h1>
    <h3>Iceland, Reykjavik </h3>



  </ion-item>

   <ion-item>
    <ion-avatar item-start>
      <img src="img/loc.jpg">
    </ion-avatar>
    <h1>Pieii</h1>
    <h3>Iceland, Reykjavik </h3>



  </ion-item>

   <ion-item>
    <ion-avatar item-start>
      <img src="img/top.jpg">
    </ion-avatar>
    <h1>Dude</h1>
    <h3>Iceland, Reykjavik </h3>



  </ion-item>

   <ion-item>
    <ion-avatar item-start>
      <img src="img/fri.jpg">
    </ion-avatar>
    <h1>de9md</h1>
    <h3>Iceland, Reykjavik </h3>



  </ion-item>

</ion-list>

</ion-content>

打字稿：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'lions-home',
  templateUrl: 'lions.html'
})
export class LionsPage {
  items;

  constructor(public navCtrl: NavController) {
    this.initializeItems();

  }

initializeItems() {
  this.items = [

  ];

}

getItems(ev) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the ev target
    var val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
}
}
}

Answer 1

你的搜索栏上方有一个额外的qazxsw poi。