Question

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

我怎样摆脱它们？

＆lt; - ＆gt;

以下是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

默认情况下，

<a>代码标记text-decoration:underline，这就是为什么该行会在下面显示。

将text-decoration: none应用于您的主播代码.nav a

Stack Snippet

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

添加display: flex后，display: inline-block上的<i>将不再适用，因为flex项目阻止元素。

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将图标置于中心位置。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

尝试使用text-decoration: none;作为链接

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

3 个答案: