如何解决 alignment 文本中心问题以及 hover 上的其他元素

Question

I have some ul li element. Here on hover of each element one new element is adding on the right side of the text. The alignment of the text is center but on hover when a new element is added on right side of it its alignment is getting changed. My problem is here, Alignment of text/new element should not effect on adding new element on hover. Here is the code below https://stackblitz.com/edit/angular-emvs2v?file=src%2Fstyles.css

home.component.html

<div style="width:50%" class="text-center box">
  <ul>
    <li [class.btn-success]="selectedIndex === 1" (mouseout)="removeIndex(1)"
        (mouseover)="setIndex(1)">Home <span class="float-right test">==></span>
    </li>
    <li [class.btn-success]="selectedIndex === 2" (mouseout)="removeIndex(2)"
        (mouseover)="setIndex(2)">Contact Us <span
      class="float-right test">==></span></li>
    <li [class.btn-success]="selectedIndex === 3" (mouseout)="removeIndex(3)"
        (mouseover)="setIndex(3)">Production<span
      class="float-right test">==></span></li>
  </ul>
</div>
<button (click)="getSelect()">Submit</button>

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {
  data: any;
  selectedIndex = 1;

  constructor () { }

  ngOnInit () {

  }

  setIndex (index: number) {
    this.selectedIndex = index;
  }

  removeIndex (index: number) {
    this.selectedIndex = null;
  }

  getSelect () {
    this.selectedIndex = 1;
  }
}

css

ul li {
  list-style-type: none;
}

.test {
  display: none;
}

.btn-success .test {
  display: block;
}

.text-center {
  text-align: center;
}

.float-right {
  float: light;
}

Answer 1

You need to take the new element outside of the usual flow, eg using position: absolute; Change your CSS to:

ul li{
  list-style-type: none;
}
.test{
  display: none;    
}
.btn-success .test{
  display: block;
}
.text-center{
  text-align: center;
}
li {
  position: relative;
}
.float-right{
  position: absolute;
  right: 0;
  top: 0;
}

You can check the working example here: https://angular-kcnrcg.stackblitz.io

Answer 2

By using display:none and display:block , you are removing the item from the DOM, causing surrounding items to move.

You can fix this by using opacity:0 and opacity:1 , instead.

You can also use the :hover pseudo-class to greatly simply the code.

 ul li { list-style-type: none; }.test { opacity: 0; float: right; }.btn-success:hover.test { opacity: 1; }

 <div style="width:150px;"> <ul> <li class="btn-success">Home <span class="test">==></span></li> <li class="btn-success">Contact Us <span class="test">==></span></li> <li class="btn-success" >Production<span class="test">==></span></li> </ul> </div>