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

<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 2

添加之前没有下划线的原因display: flex是因为<i>设置为display: inline-block，因此下划线不会呈现。

\n\n

\n
• 为什么显示：inline-block; 从子元素中删除下划线？
\n

\n\n

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

\n\n

\n
• 弹性项目的“display”属性允许的值是什么？（flex-item\xe2\x80\x99s 子项的布局无关）
\n

\n\n

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

\n\n\n\n

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

\n\n

\r\n

\r\n

.nav {\r\n  width: 60px;\r\n  height: 100vh;\r\n  top: 100px;\r\n  min-height: 100vh;\r\n  background-color: #cccccc;\r\n  position: fixed;\r\n  z-index: 999;\r\n  opacity: .4;\r\n  border-right: 1px solid black;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.nav a {\r\n  width: 100%;\r\n  height: 60px;\r\n  border: none;\r\n  text-align: center;\r\n  \r\n}\r\n\r\n.nav a i {\r\n  line-height: 60px;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n