c# - 如何将列表项与图标对齐？

Question

我的侧边栏导航中有一个无序列表，并在左侧添加了图标，但由于图标大小不同，列表项对象在左侧似乎没有对齐。这是我的例子：

这就是我想要的：

这里的代码：HTML（带有 ASP.Net MVC 元素）：

 <div class="wrapper">
    <div class="sidebar text-light bg-primary-darker">
        <ul>
            <li><a asp-action="Info" asp-controller="Dashboard"><i class="fas fa-home"></i>Home</a></li>
            <li><a asp-action="Invoices" asp-controller="Dashboard"><i class="fas fa-file-invoice-dollar"></i>Invoices</a></li>
            <li><a asp-action="Customers" asp-controller="Dashboard"><i class="fas fa-user-friends"></i>Customers</a></li>
            <li><a asp-action="Settings" asp-controller="Dashboard"><i class="fas fa-cog"></i>Settings</a></li>
        </ul>
    </div>
</div>

CSS：

.wrapper {
  margin-top: -1px;
  position: relative;
  z-index: 1;
}

.wrapper .sidebar {
  position: fixed;
  width: 15%;
  height: 100%;
  background-color: #016fe6;
  padding: 50px 0;
  font-size: 22px;
}

.wrapper .sidebar ul {
  display: flex;
  flex-direction: column;
  padding-inline-start: 10px;
}

.wrapper .sidebar li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  list-style-type: none;
  margin: 10px;
  height: 100%;
}

.wrapper .sidebar li a {
  text-decoration: none;
  display: block;
  color: #fff;
  padding-left: 15px;
}

.wrapper .sidebar li a i {
  margin-right: 15px;
}

.wrapper .sidebar li a:hover{
  color: rgb(189, 204, 204);
}

我也在使用 Bootstrap 4。

标签： c#htmlcssbootstrap-4

Answer 1

Because you are using font awesome you can add fa-fw to them.
More info Fixed Width Icons