Как выровнять значок материала под текстом ссылки?

Как я могу выровнять стрелку вниз от значков материала под текстом ссылки? Я пытался использовать псевдокласс :after, но это не сработало.

HTML:

<div class="jump-to-links">
    <ul class="list-unstyled">
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></a>
      </li>
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></a>
      </li>
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></a>
      </li>
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></li></a>
    </ul>
  </div>

СКСС:

.jump-to-links {
  .material-icons {
    @include centerX();
    bottom: -20px;
    color: $purple;
    padding: 10px 0px 10px 0px;
  }
  text-align: center;
  a,a:hover {
    text-decoration: none;
    color: $black;
    font-weight: bold;
    display: inline-block;
  }
  ul li {
    display: inline-block;
    margin-right: 12%;
  }
  li {
    cursor: pointer;
    text-align: center;
    position: relative;
  }
}

JSFIDDLE https://jsfiddle.net/kpvwwveL/6/


html css materialize
person user3438917    schedule 24.03.2016    source источник
comment
в центре под ссылкой с включенным значком материала: jsfiddle.net/t27je5Lq   -  person dewd    schedule 25.03.2016
comment
Кто-нибудь из приведенных ниже ответов сработал для вас?   -  person Stickers    schedule 05.04.2016
comment
@Pangloss - я нашел еще один способ решить свою проблему.   -  person user3438917    schedule 05.04.2016
comment
Приятно слышать, просто чтобы проверить, так как вопрос все еще открыт. Вы можете принять тот, который также работает, или опубликовать свой собственный ответ, если хотите.   -  person Stickers    schedule 05.04.2016

Ответы (3)


arrow_upward
0
arrow_downward

Добавьте display:block в свой

i{
  display:block;
}

https://jsfiddle.net/kpvwwveL/3/

person Dale    schedule 24.03.2016

arrow_upward
0
arrow_downward

Я обнаружил, что это лучший способ решить проблему выравнивания:

<div class="jump-to-links">
    <ul class="list-unstyled">
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></a>
      </li>
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></a>
      </li>
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></a>
      </li>
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></li></a>
    </ul>
  </div>


.jump-to-links {
  .material-icons {
    @include centerX();
    bottom: -20px;
    color: $purple;
    padding: 10px 0px 10px 0px;
  }
  text-align: center;
  a,a:hover {
    text-decoration: none;
    color: $black;
    font-weight: bold;
    display: inline-block;
  }
  ul li {
    display: inline-block;
    margin-right: 12%;
  }
  li {
    cursor: pointer;
    text-align: center;
    position: relative;
  }
}
person user3438917    schedule 05.04.2016

arrow_upward
0
arrow_downward

Зачем все усложнять и не идти естественным путем? Я думаю, что нужно поставить разрывы строк между текстом ссылки и i.

  <a href="#">
    Link
    <br>
    <i class="material-icons arrow-down">keyboard_arrow_down</i>
  </a>

https://jsfiddle.net/weejoy22/

person mzrnsh    schedule 05.04.2016