Ionic segment button issue

Issue

I have created three ion segment buttons. How to fix the buttons fit to the screen? As you can see in the image below, the segment buttons are automatically placed in the center. I'm unable to make the buttons stretch.

<ion-segment>
    <div>
        <ion-segment-button value="p1" >
        <ion-label><b>Person 1</b></ion-label>
        </ion-segment-button>
    </div>
    <div>
        <ion-segment-button value="p2">
        <ion-label><b>Person 2</b></ion-label>
        </ion-segment-button>
    </div>
    <div>
        <ion-segment-button value="p3">
        <ion-label><b>Person 3</b></ion-label>
        </ion-segment-button>
    </div>
  </ion-segment>

Solution

You can use ion-row and ion-col like this:

<ion-row>
  <ion-segment>
      <ion-col>
           <ion-segment-button value="p1" >
           <ion-label><b>Person 1</b></ion-label>
           </ion-segment-button>
      </ion-col>
      <ion-col>
           <ion-segment-button value="p2">
           <ion-label><b>Person 2</b></ion-label>
           </ion-segment-button>
      </ion-col>
      <ion-col>
          <ion-segment-button value="p3">
          <ion-label><b>Person 3</b></ion-label>
          </ion-segment-button>
      </ion-col>
  </ion-segment>
</ion-row>

Answered By - Tomislav Stankovic