时间戳

首页 > 解决方案 > 除了悬停时的其他元素外，如何解决文本中心的对齐问题

javascript - 除了悬停时的其他元素外，如何解决文本中心的对齐问题

问题描述

我有一些 ul li 元素。在这里，在每个元素悬停时，一个新元素将添加到文本的右侧。文本的对齐方式是居中的，但是当在其右侧添加新元素时，它的对齐方式会发生变化。我的问题在这里，文本/新元素的对齐不应该影响在悬停时添加新元素。这是下面的代码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;
}

标签： javascripthtmlcssangular

解决方案

您需要将新元素置于常规流程之外，例如使用position: absolute; 将您的 CSS 更改为：

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;
}

您可以在此处查看工作示例：https ://angular-kcnrcg.stackblitz.io

推荐阅读