検索
検索

HTMLリストにアイコンとテキストを適用するとインデントの問題が発生します。アイテムを適切にインデントするにはどうすればよいですか？

debugcn 投稿 Dev
3
革新

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

どんな助けでも喜ばれるでしょう

カダス

最も簡単な解決策はi、CSSのアイコンの固定幅を正確にすることです。

いくつかの非常に重要な修正：

  • 私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]

編集
0

コメントを追加

0
サインイン

関連記事

Related 関連記事

ホットタグ

アーカイブ