Comment créer une sous-liste dans une liste (une liste imbriquée) en HTML ?

Active 08 avril 2021    /    Viewed 2221    /    Comments 0    /    Edit


Exemples de comment créer une sous-liste dans une liste (une liste imbriquée) en HTML ?

Créer une liste en HTML

Exemple

<!DOCTYPE html>
<html lang="en">

<head>
  <title>HTML Test Page</title>
</head>

<body>

List of items:
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

</body>
</html>

donne

Comment créer une sous-liste dans une liste (une liste imbriquée) en HTML ?

Pour créer une liste ordonnée, utilisez "ol" au lieu de "ul"

List of items:
<ol>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
</ol>

donne

Comment créer une sous-liste dans une liste (une liste imbriquée) en HTML ?

Créer une liste imbriquée en HTML

List of items:
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
      <ul>
        <li>sub item 1</li>
        <li>sub item 2</li>
        <li>sub item 3</li>
      </ul>
  <li>item 4</li>
  <li>item 5</li>
</ul>

donne

Comment créer une sous-liste dans une liste (une liste imbriquée) en HTML ?

Un autre exemple avec une liste oredered:

List of items:
<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
      <ul>
        <li>sub item 1</li>
        <li>sub item 2</li>
        <li>sub item 3</li>
      </ul>
  <li>item 4</li>
  <li>item 5</li>
</ol>

donne

Comment créer une sous-liste dans une liste (une liste imbriquée) en HTML ?

Styliser une liste en HTML

Exemples de comment styliser une liste em HTML:

Changer la forme des puces

<!DOCTYPE html>
<html lang="en">

<head>
  <title>HTML Test Page</title>
</head>

<style>

ul li{
  list-style-type: "→";
}

</style>

<body>

List of items:
<ul class="a">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
      <ul class="b">
        <li>sub item 1</li>
        <li>sub item 2</li>
        <li>sub item 3</li>
      </ul>
  <li>item 4</li>
  <li>item 5</li>
</ul>


</body>
</html>

donne

Comment créer une sous-liste dans une liste (une liste imbriquée) en HTML ?

Changer la couleur des puces

<!DOCTYPE html>
<html lang="en">

<head>
  <title>HTML Test Page</title>
</head>

<style>

ul {
  list-style: none;
}

ul li::before {
  content: "\2022";
  color: red;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

</style>

<body>

List of items:
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
      <ul>
        <li>sub item 1</li>
        <li>sub item 2</li>
        <li>sub item 3</li>
      </ul>
  <li>item 4</li>
  <li>item 5</li>
</ul>


</body>
</html>

donne

Comment créer une sous-liste dans une liste (une liste imbriquée) en HTML ?

Another example with a different color for the nested list:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>HTML Test Page</title>
</head>

<style>

ul {
  list-style: none;
}

ul.a li::before{
  content: "\2022";
  color: red;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

ul.b li::before{
  content: "\2022";
  color: green;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

</style>

<body>

List of items:
<ul class="a">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
      <ul class="b">
        <li>sub item 1</li>
        <li>sub item 2</li>
        <li>sub item 3</li>
      </ul>
  <li>item 4</li>
  <li>item 5</li>
</ul>


</body>
</html>

donne

Comment créer une sous-liste dans une liste (une liste imbriquée) en HTML ?

Références


Card image cap
profile-image
Daidalos

Hi, I am Ben.

I have developed this web site from scratch with Django to share with everyone my notes. If you have any ideas or suggestions to improve the site, let me know ! (you can contact me using the form in the welcome page). Thanks!