简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

HTMLでliを使用する方法

下次还敢
リリース： 2024-04-27 18:48:48
オリジナル
463 人が閲覧しました

li 要素は、順序なしリストまたは順序付きリスト内の単一のリスト項目を定義する HTML の要素です。これは通常、ul (順序なしリスト) 要素または ol (順序付きリスト) 要素とともに使用され、他の li 要素内でネストしてネストされたリストを作成することもできます。これには特定のプロパティはありませんが、すべての一般的な HTML 要素のプロパティを継承します。 CSS スタイルを使用すると、フォント、サイズ、色、境界線、パディングなどのリスト項目の外観を変更できます。

HTMLでliを使用する方法

#HTML での li 要素の使用

li 要素とは何ですか?

li 要素 (リスト項目要素) は、順序なしリストまたは順序付きリスト内の単一のリスト項目を定義するために使用されます。リストのテキストまたはその他のコンテンツが含まれます。

li 要素の構文

  • 内容
    • ログイン後にコピー

    li 要素の属性

    li 要素には特定の属性はありません。ただし、すべての一般的な HTML 要素のプロパティを継承します。例:

      id ​​- リスト項目の一意の ID を指定します。
    • class - リスト項目の 1 つ以上のクラス名を指定します。 list item
    • style - リスト アイテムのインライン スタイルを設定します

    li 要素の使用法

    li 要素は通常、ul とともに使用されます。 (順序なしリスト) 要素または ol (順序付きリスト) 要素。順序なしリストでは、リスト項目はドット (•) として表示されます。順序付きリストでは、リスト項目は数字または文字として表示されます。

    例:

    順序なしリスト: 

      
  
    • 项目 1
      • 
  
    • 项目 2
      • 
  
    • 项目 3
      •
    ログイン後にコピー

    順序付きリスト: 

      
  
    1. 项目 1
      2. 
  
    2. 项目 2
      3. 
  
    3. 项目 3
      4.
    ログイン後にコピー

    ネストされたリスト:

    li 要素を他の li 要素内にネストして、ネストされたリストを作成することもできます。

    例: 

      
  
    • 项目 1
    
        
      
      • 嵌套项目 1
        • 
      
      • 嵌套项目 2
        • 
    
      
  
      •
    ログイン後にコピー

    li 要素のスタイル

    li 要素は CSS スタイルを使用してスタイルを設定して、外観を変更できます。たとえば、リスト項目のフォント、サイズ、色、境界線、およびパディングを変更できます。

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

    関連ラベル：
    css
    ソース：php.cn
    前の記事：HTMLでのタグの使い方 次の記事：HTMLでのリンクタグの使い方
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    WordPress 6.0 (add_editor_style) が Gutenberg エディターで style.css を読み込まない カスタムWordPressブロックテーマを作成するためにUdemyWordPressコースを受講しています。 function.php にブロック タイプが正常に登録され、Gute...
    から 2023-11-12 20:37:50
    0
    2
    261
    CSS の小数点の先頭のゼロが大きな数値では機能しない 最近、100 を超えるリスト項目を含む順序付きリストを作成したときに問題が発生しました。 list-style:10 進数先頭ゼロ;ol{list-style:10 進数先頭ゼロ;...
    から 2023-11-07 10:35:53
    0
    1
    236
    Sass エラー: ファイルはすでにロードされています: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; src\css\quasar.variables.scss 私は quasar フレームワークを使用しており、プロジェクトのコンパイル中に上記のエラーが発生しました。モジュールのビルドに失敗しました (./node_modules/sass...
    から 2023-11-06 21:38:55
    0
    1
    219
    HTML/CSSに背景ビデオを埋め込むにはどうすればよいですか? 皆さん、こんにちは。最近問題が発生しました。自分のサイトにビデオの背景を設定しようとしていますが、中央揃えのテキストが一番下まで表示されます。理由はわかりませんが、ナビゲーション ...
    から 2023-11-06 13:59:13
    0
    1
    240
    JavaScriptでCSS/HTMLの名前付きcolorのRGB値を取得する方法 [name-rgb] という名前の Javascript オブジェクトを作成しました。 Basic:namedColors={AliceBlue:[240,248,255],Ant...
    から 2023-11-06 09:05:50
    0
    2
    210
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！