如何将列表项与图标对齐？答案

【问题标题】：How to align list items with icons?如何将列表项与图标对齐？
【发布时间】：2021-08-08 01:21:57
【问题描述】：

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

这是我想要的：

代码如下： 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# html css bootstrap-4

【解决方案1】：

因为您使用的是很棒的字体，所以您可以将fa-fw 添加到它们。
更多信息Fixed Width Icons

【讨论】：