ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLのulタグとliタグのドットを削除する方法

HTMLのulタグとliタグのドットを削除する方法

下次还敢
リリース: 2024-04-27 21:00:44
オリジナル
879 人が閲覧しました

HTML の ul タグと li タグからドットを削除するには、次の手順を実行します。 CSS スタイル list-type none: ul, li { list-style-type: none } を使用します。疑似要素とコンテンツ属性の前に使用します: li { 位置: 相対; 左: 1em; }; 位置: 左: 0; height : 0.

HTMLのulタグとliタグのドットを削除する方法

HTML の ul タグと li タグのドットを削除する方法

HTML では、ul (順序なしリスト) タグと li (リスト項目) タグは通常、マーカーとして小さな丸い点を表示します。これらのドットを削除する必要がある場合は、CSS スタイルシートを使用できます。

#メソッド:

  1. #リスト スタイル タイプなしを使用:

    #

    <code class="css">ul, li {
      list-style-type: none;
    }</code>
    ログイン後にコピー
  2. 疑似要素と content 属性の前に使用:
  3. <code class="css">li {
      position: relative;
      padding-left: 1em;
    }
    
    li:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.2em;
      width: 0.5em;
      height: 0.5em;
      background-color: #000;
      border-radius: 50%;
    }</code>
    ログイン後にコピー
  4. 使用例:

<code class="html"><ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul></code>
ログイン後にコピー
<code class="css">ul, li {
  list-style-type: none;  // 使用列表样式类型 none
}</code>
ログイン後にコピー
効果:

丸いドットが削除され、プレーン テキストの内容を含む順序なしリストが作成されます。

注:

上記の解決策は、Firefox、Chrome、Safari などの最新のブラウザでのみ機能します。

    Internet Explorer などの古いブラウザの場合、同じ効果を得るには追加のハックまたは JavaScript が必要になる場合があります。

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

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート