html - 更改 CSS 过渡的方向

Question

我想让按钮向左移动，这样它们就不会碰到右边距并移动，但我不知道该怎么做。

谁能解释一下如何改变过渡的方向？

.menus {
  position: fixed;
  right: 40;
  top: 150px;
  z-index: 2000;
}

.menus ul {
  list-style: none;
}

.menus ul li a {
  display: inline-block;
  color: #fff;
  background: #000;
  padding: 10px 15px;
  text-decoration: none;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.menus ul li .icon-home3 { background: #81e0cd; }
.menus ul li .icon-terminal { background: #81e0cd; }
.menus ul li .icon-pacman { background: #81e0cd; }

.menus ul li a:hover {
  padding: 10px 25px;
  background: #000;
}

<div class='menus'>
  <ul>
    <li>
      <a href="#" class="icon-home3"></a>
    </li>
    <li>
      <a href="#" class="icon-terminal"></a>
    </li>
    <li>
      <a href="#" class="icon-pacman"></a>
    </li>
  </ul>
</div>

Answer 1

您可以使用 text-align 属性将元素向右移动。我还将 padding 属性更改为 width ，因为无论如何我们都想修改宽度。

更改应用于元素的 onHover 事件。因此，我们从元素的标准尺寸开始，例如20px 然后让它增长到 100% 或任何你喜欢的大小。

正如其他人在评论部分所写的那样，请随意使用 flexbox 作为替代方案。

    .menus {
      position: fixed;
      right: 40;
      top: 150px;
      z-index: 2000;
      background-color: pink;
    }
    
    .menus ul {
      display: block;
      width: 100px;
      text-align: right;
      padding: 10px 0 5px;
      margin: 0;
      list-style: none;
    }
    
    .menus ul li a {
      display: inline-block;
      color: #fff;
      background: #000;
      height: 20px;
      width: 20px;
      margin: 0;
      padding: 0;
      text-decoration: none;
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
    }
    
    .menus ul li .icon-home3 {
      background: #81e0cd;
    }
    
    .menus ul li .icon-terminal {
      background: #81e0cd;
    }
    
    .menus ul li .icon-pacman {
      background: #81e0cd;
    }
    
    .menus ul li:hover a {
      width: 100%;
      background: #000;
    }

<div class='menus'>
  <ul>
    <li>
      <a href="#" class="icon-home3"></a>
    </li>
    <li>
      <a href="#" class="icon-terminal"></a>
    </li>
    <li>
      <a href="#" class="icon-pacman"></a>
    </li>
  </ul>
</div>