Как переместить каждую линию вверх с помощью наведения и заполнения - PullRequest
Новая
       12

Как переместить каждую линию вверх с помощью наведения и заполнения

0 голосов
/ 31 декабря 2018

Я пытаюсь сделать так, чтобы каждый li увеличивался на несколько пикселей при наведении курсора, но мне кажется, что мои математические и CSS навыки не помогают.Как вы можете видеть сейчас, каждый ли движется вверх одновременно.Я ценю, если кто-нибудь предоставит мне быстрый трюк или даже лучший способ добиться этого.

Спасибо. 

    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>

Ответы [ 2 ]

0 голосов
/ 31 декабря 2018

вы используете 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>
0 голосов
/ 31 декабря 2018

Fixed.Используется выравнивание по вертикали: 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;
}
...