HTML liからドットを削除する方法

html li からドットを削除する方法: 1. "list-style:none" メソッドを使用します; 2. "list-style-type:none" によって削除します; 3. リスト スタイルをli tag; 4. 「.a1{list-style-type:none;}」を通じて削除します。

#この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

html li黒点の除去

仕事ではリストをよく使います。リストは順序付きリストと順序なしリストに分けられます。順序なしリストは、黒点が表示されます。ページにアクセスすると、シリアル番号が順序付きリストに表示されます。ただし、それが不要で冗長であると考える場合があります。リストの前にあるドットとシリアル番号を表示する必要はありません。

リストスタイルを削除できますか? li の前のドットを削除するにはどうすればよいですか? 次に、例を挙げてコードと図で説明します。

この例を見てください。リスト スタイルを削除しなかった場合にどのような影響があるかを確認するために、順序なしリストを使用して古代の 4 人の美女の名前を書きました。

<ul>
 <li>西施</li>
 <li>王昭君</li>
 <li>貂蝉</li>
 <li>杨玉环</li>   
 </ul>

レンダリング:

これで、先頭のドットは必要なくなりました。リスト、どうやって剥がせばいいですか?毛糸?

次に、リストの先頭にある小さな点を削除するいくつかの方法を紹介します。

1. CSS に list-style:none を記述します。この属性を通じて、リスト スタイル

ul{list-style: none;}

レンダリング:

2. CSS に list-style-type: none を追加します。これは前の方法と同じですが、異なる属性を使用します。

ul{list-style-type: none;}

3. リスト スタイルを li タグに直接追加します。最初の 2 つのスタイルはドットを削除するために指定されていますが、後の 2 つは指定されていないため、引き続き表示されます。

<ul>
 <li style="list-style-type: none;">西施</li>
 <li style="list-style-type: none;">王昭君</li>
 <li>貂蝉</li>
 <li>杨玉环</li>   
 </ul>

レンダリング:

4. もちろん、ラベルにクラス名を付けて CSS でスタイルを設定することもできます。次のコードは、最初の li タグのみをスタイル設定します。当然、その前にドットはありません。

HTML 部分:

<ul>
 <li class="a1">西施</li>
 <li>王昭君</li>
 <li>貂蝉</li>
 <li>杨玉环</li>   
 </ul>

CSS 部分:

.a1{list-style-type: none ;}

レンダリング:

要約: 上記では、CSS でリスト スタイルを削除する方法、つまり 4 つの方法を紹介しました。すべてを使用できますが、それはあなたの個人的な習慣によって異なります。li の前にあるドットを削除する方法に関するこのチュートリアルが役立つことを願っています。

【推奨学習:

css ビデオ チュートリアル 】

以上がHTML liからドットを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。