Question

当用户悬停时，我试图使每个li上升几个像素，但似乎我的数学和CSS技能没有帮助。您现在可以看到，每个li都在同时移动。如果有人为我提供了一个快速窍门甚至更好的方法来实现这一目标，我将不胜感激。

谢谢。

    nav ul {
      margin:0;
      padding:1rem;
      text-transform: capitalize;
      font-weight:300;
      font-family: 'Montserrat', sans-serif;
      font-size:1.5rem;
    }

    nav ul li {
      margin:0 1rem;
      display:inline-block;
      cursor:pointer;
      padding:10px 20px;
    }
    
    
    nav ul li:hover {
      padding:15px 20px 15px;
    }

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  
  <nav>
    <ul>
      <li><i class="fas fa-home"></i>Home</li>
      <li><i class="fas fa-user-alt"></i>About</li>
      <li><i class="fas fa-pencil-ruler"></i>Portfolio</li>
      <li><i class="far fa-file"></i>Resume</li>
      <li><i class="fas fa-envelope"></i>Contact</li> 
    </ul>
  </nav>

Answer 1

已修复。使用的垂直对齐方式：top;

这里是工作示例：https://jsfiddle.net/nys1e4k8/

nav ul {
  margin:0;
  padding:1rem;
  text-transform: capitalize;
  font-weight:300;
  font-family: 'Montserrat', sans-serif;
  font-size:1.5rem;
}

nav ul li {
  margin:0 1rem;
  display:inline-block;
  cursor:pointer;
  padding:10px 20px;
  vertical-align: top;
  transition: all .2s ease-in-out;
}


nav ul li:hover {
  padding: 6px 20px 0 20px;
}

Answer 2

您正在使用display:inline-block，这就是为什么要悬停所有li的移动，所以您需要使用float:left并为li设置高度

*,:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

nav ul {
      margin:0;
      padding:1rem;
      text-transform: capitalize;
      font-weight:300;
      font-family: 'Montserrat', sans-serif;
      font-size:1.5rem;
      list-style-type:none;
    }

    nav ul li {
      margin:0 1rem;
      float:left;
      cursor:pointer;
      padding:10px 20px;
      height:50px;
      transition: all .2s linear;
    }
    
    
    nav ul li:hover {
      padding:15px 20px 15px;
      height:50px;
    }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  
  <nav>
    <ul>
      <li><i class="fas fa-home"></i>Home</li>
      <li><i class="fas fa-user-alt"></i>About</li>
      <li><i class="fas fa-pencil-ruler"></i>Portfolio</li>
      <li><i class="far fa-file"></i>Resume</li>
      <li><i class="fas fa-envelope"></i>Contact</li> 
    </ul>
  </nav>

如何使用悬停和填充向上移动每个li

2 个答案: