display: flex 显示带下划线的图标

Question

如果我将导航栏中的图标与display: flex 对齐，它会在我的图标下方显示一个下划线。如果我禁用它，它们会消失，但我的图标没有正确对齐。见下图。

我怎样才能摆脱它们？

代码如下：

.nav {
  width: 60px;
  height: 100vh;
  top: 100px;
  min-height: 100vh;
  background-color: #cccccc;
  position: fixed;
  z-index: 999;
  opacity: .4;
  border-right: 1px solid black;
  display: flex;
  flex-direction: column;
}

.nav a {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="nav">
  <a href=""><i class="material-icons">home</i></a>
  <a href=""><i class="material-icons">shopping_basket</i></a>
  <a href=""><i class="material-icons">business</i></a>
  <a href=""><i class="material-icons">mail</i></a>
  <a href=""><i class="material-icons">card_giftcard</i></a>
</div>

Answer 1

之所以在添加display: flex之前没有下划线，是因为<i>设置为display: inline-block，下划线不渲染。

• Why does display: inline-block; remove an underline from a child element?

添加display: flex 后，<i> 上的display: inline-block 将不再应用，因为弹性项目是块状 元素。

• What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)

将text-decoration: none 添加到a 将解决此问题

---

由于a 具有固定高度，另一种方法是删除display: flex 并使用text-align/line-height 使图标居中。

.nav {
  width: 60px;
  height: 100vh;
  top: 100px;
  min-height: 100vh;
  background-color: #cccccc;
  position: fixed;
  z-index: 999;
  opacity: .4;
  border-right: 1px solid black;
  display: flex;
  flex-direction: column;
}

.nav a {
  width: 100%;
  height: 60px;
  border: none;
  text-align: center;
  
}

.nav a i {
  line-height: 60px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="nav">
  <a href=""><i class="material-icons">home</i></a>
  <a href=""><i class="material-icons">shopping_basket</i></a>
  <a href=""><i class="material-icons">business</i></a>
  <a href=""><i class="material-icons">mail</i></a>
  <a href=""><i class="material-icons">card_giftcard</i></a>
</div>

Answer 2

<a> 标签默认有text-decoration:underline，这就是为什么下面的行。

将text-decoration: none 应用于您的锚标签.nav a

堆栈片段

.nav {
  width: 60px;
  height: 100vh;
  top: 100px;
  min-height: 100vh;
  background-color: #cccccc;
  position: fixed;
  z-index: 999;
  opacity: .4;
  border-right: 1px solid black;
  display: flex;
  flex-direction: column;
}

.nav a {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  text-decoration: none;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="nav">
  <a href=""><i class="material-icons">home</i></a>
  <a href=""><i class="material-icons">shopping_basket</i></a>
  <a href=""><i class="material-icons">business</i></a>
  <a href=""><i class="material-icons">mail</i></a>
  <a href=""><i class="material-icons">card_giftcard</i></a>
</div>

Answer 3

试试text-decoration: none; 链接