Question

我正在使用左侧带有图标的链接在导航栏上创建下拉菜单的链接。目前，我可以将链接正确显示为链接，并在文本旁边显示图标，但是，使用样式代码，我目前无法更改字体大小或向文本添加填充以在链接之间添加更多空间。

我在下面包含了我的代码-请注意，我仍在学习html / css，因此我确定这不是最好的方法。

.icon a {
  float: left;
  text-align: center;
  padding: 12px;
  color: black;
  font-size: 50px;
}

.navbar-item {
  font-size: 50px;
}

<script src="https://kit.fontawesome.com/102c5467e4.js"></script>
<a class="navbar-item" href="#about">
  <span>
    <span class="icon"><i class=""></i></span> Accent Chairs
  </span>
</a>

Answer 1

.icon a定位到作为a类成员的元素的后代的任何icon元素。

您的代码具有icon类的一个成员和一个a元素，但是a是icon的祖先，而不是后裔。

Answer 2

在您的CSS中使用a .icon代替.icon a

a .icon {
  float: left;
  text-align: center;
  padding-right: 30px;
  color: black;
  font-size: 60px;
}

.icon::before {
   content: "$"
}

.navbar-item {
  font-size: 50px;
}

<script src="https://kit.fontawesome.com/102c5467e4.js"></script>
<a class="navbar-item" href="#about">
  <span>
    <span class="icon"><i class=""></i></span> Accent Chairs
  </span>
</a>

为什么我的CSS无法正确设置HTML样式？

2 个答案: