在HTML列表中应用图标和文本时，我遇到缩进问题。如何正确缩进项目？

debugcn 发表于 Dev

革新

我的html代码：

<ul>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"  ></i><a href="order.html">Orders</a></li>
            <li><i class='  fa fa-address-book'  aria-hidden="true" ></i> <a href="dashboard.html">Dashboard</a></li>
            <li><i class="fa fa-cube" aria-hidden="true" ></i> <a href="products.html">Products</a></li>
            <li><i class="fa fa-gear" aria-hidden="true" ></i> <a href="SellerSection.html">Seller Section</a></li>
            <li><i class="fa fa-dollar" aria-hidden="true"style ="font-size: 40px;" ></i> <a href="sales.html">Sales</a></li>
            <li><i class='fa fa-user' aria-hidden="true" ></i> <a href="customer.html">Customers</a></li>
            <li class="active"><i class='fa fa-user-circle' aria-hidden="true" ></i> <a href="admin.html">Admin</a></li>
            <li ><i class="fa fa-arrow-circle-left" aria-hidden="true"  ></i> <a href="return.html">Return</a></li>
        </ul>

任何帮助将不胜感激

卡达斯

最简单的解决方案是为iCSS中的图标精确调整固定宽度。

一些非常重要的更正：

我删除了font-size: 40px;美元符号，它确实比其他符号大，我怀疑它是否故意
</i>的开始和结束之间不应有空格<a ...，或者每个空格的空格数量应相同（因为它们显示为空格）

一些建议：

我选择的宽度大于图标的大小，以便图标和链接之间有一点水平空间
您可以使用图标的来控制垂直间距height。我选择20以留出更多空间
您可以使用来控制图标的大小font-size（因为它们实际上是文本字符），但是我需要使用!important因为在类中将fa其设置为inherit（仅当您需要链接以外的字体大小时才这样做，因为使用继承时，它将遵循字体大小）在上设置li）。随意调整所有尺寸
要隐藏列表附带的光盘，只需将其添加list-style: none;到li
默认情况下，在上设置了顶部和底部边距ul，并在左侧填充了空白，您可以通过值来控制它们

i {
  width: 20px;
  height: 20px;
  font-size: 16px !important; 
}

li {
  list-style: none;
}

ul {
  margin-top: 10px;
  margin-bottom: 0;
  padding-left: 20px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"  ></i><a href="order.html">Orders</a></li>
            <li><i class='  fa fa-address-book'  aria-hidden="true" ></i><a href="dashboard.html">Dashboard</a></li>
            <li><i class="fa fa-cube" aria-hidden="true" ></i><a href="products.html">Products</a></li>
            <li><i class="fa fa-gear" aria-hidden="true" ></i><a href="SellerSection.html">Seller Section</a></li>
            <li><i class="fa fa-dollar" aria-hidden="true"></i><a href="sales.html">Sales</a></li>
            <li><i class='fa fa-user' aria-hidden="true" ></i><a href="customer.html">Customers</a></li>
            <li class="active"><i class='fa fa-user-circle' aria-hidden="true" ></i><a href="admin.html">Admin</a></li>
            <li ><i class="fa fa-arrow-circle-left" aria-hidden="true"  ></i><a href="return.html">Return</a></li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。