Question

如何对齐链接文本下的材质图标中的向下箭头？我尝试使用: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>

SCSS：

.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/

Answer 1

将display：block添加到

i{
  display:block;
}

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

Answer 2

我发现这是解决对齐问题的最佳方法：

<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;
  }
}

Answer 3

为什么复杂化而不是自然而然？我认为在链接文本和i之间插入换行符。

re.escape

https://jsfiddle.net/weejoy22/

如何在链接文本下对齐材质图标？

3 个答案: