css如何设置盒子变宽，文字不动？

如何设置鼠标经过一个p标签让p标签的背景变宽了，但是文字位置不变

 background-color: orange;
    width: 250px;
    text-align: right;

我设置的是这个样子的，但是只要经过一个p标签，所有的p标签都会变宽，然后文字的位置也就变了

给你需要背景变宽的P标签加一个样式，例如 p1,然后给p1加一个经过样式，例如，p1:hover{},至于文字位置可以考虑居中，靠右的话肯定会变化

可以在外边套一个div 经过的时候把div背景变宽 里边的p标签还是250px

p{
text-align:center;
width:250px;

}
p:hover{
width:300px;
text-align:center;
}

试试这样操作，滑过某个给某个动态加class(.active),

<p class="plist"
           v-for="(item, index) in 20"
           :key="'a'+index"
           :class="activeClass === index ? 'active':''"
           @click="addClass(item, index)">{{item}}</p>

//css
.plist{
            width: 100%;
            height: 40px;
            border-radius: 10px;
            list-style: none;
            text-align: center;
            line-height: 40px;
            font-size: 30px;
        }
        .plist:hover {
            background-color: #2887f0;
            color: #fff;
        }
        .active {
            background-color: #2887f0;
            color: #fff;
        }
//js
data(){
            return {
              activeClass: -1
          }
}
addClass(item, index){
          this.activeClass = index
 }