Créer une tabulation

**Aujor** · 24/11/2020, 11h10

Bonjour, 'ai utilisé le code trouvéé sur cette discussion : Faire une tabulation, un espace en HTML ?

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.marge {
  margin-left: 5em;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<p>
   Un début de texte
   <span class="marge">un texte plus loin (espace de 5 caractères)</span>
   <span class="marge">un texte encore plus loin</span>
</p>

J'ai utilisé ce code pourtant cela ne fait qu'un espace basique et ne sépare pas réellement les deux chaines de caractères, une idée de pourquoi et comment régler ce soucis ?

**ProgElecT** · 24/11/2020, 11h35

Salut Aujor, bienvenue sur DVP

Je viens de vérifier, le code fonction correctement, tu dois avoir un endroit dans ton code qui contrarie cette class.
Montres nous un peu plus de ton code pour essayer de te dépanner.

**rospionne** · 24/11/2020, 16h57

J'ai repris ton code et comme prévue, il fait qu'une seul ligne avec des grands espaces.
Nom : 2020-11-24 16_54_52-Window.png
Affichages : 2347
Taille : 14,3 Ko

L'écriture recommandé pour obtenir des tabulation et des sous-tabulation :
Nom : 2020-11-24 16_51_33-Window.png
Affichages : 2503
Taille : 18,2 Ko

J'ai juste ajouté <br> pour sauté une ligne. Et utiliser <span> paramétré par css pour faire ma tabulation.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<p>
   Un début de texte <br/>
   <span  style="margin-left: 5em;">un texte plus loin (espace de 5 caractères)</span><br/>
   <span  style="margin-left: 5em;"><span  style="margin-left: 5em;"></span>un texte encore plus loin</span>
</p>

Vous pouvez tester le code sur https://www.w3schools.com/html/tryit...=tryhtml_intro et tester votre version pour constater le résultat. A faire sur un écran de 1920px de large.

**ProgElecT** · 24/11/2020, 17h53

Salut

Je ne comprend pas le problème, avec ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="fr"> <!-- ABaseHTML.html -->
 
	<head>
		<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Minimum pour page HTML</title>
 
		<style>
.marge {
margin-left: 5em;
}
.margeTriple {
margin-left: 15em;
}
                </style>
 
		<script>
                        'use strict'; // force la déclaration des variables
                        //********************************************************************************
                        //--------------------------------------------------------------------------------
 
                </script>
 
	</head> 
	<body>	<!-- ........................................................................................................... -->
 
<p>
   Un début de texte <br/>
   <span class="marge">un texte plus loin (espace de 5 caractères)</span><br/>
   <span class="marge"><span class="marge"></span>un texte encore plus loin</span><br/>
   <span class="margeTriple">un texte plus loin (espace de 15 caractères)</span>
</p>
		<script> // ........................................................................................................ --> 
 
                </script> <!-- ..................................................................................................... -->
	</body>	<!-- ........................................................................................................... -->
 
</html>

j’obtiens

Ce n'est pas ce que vous recherché à faire, car la discussion porte bien sur cet effet.

**NoSmoking** · 24/11/2020, 18h29

Bonjour,

vous pouvez passer par un display:list-item en supprimant le superflu

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
.marge {
  display: list-item;
  margin-left: 5em;
  list-style: none;
}
.marge:empty {
  display: inline-block;
}
.margeTriple {
  margin-left: 15em;
}

plus besoin des <br>.

**NoSmoking** · 25/11/2020, 11h12

Peut-être un peu plus souple !

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
[class^="marge"] {
  margin-left: 5em;
  display:list-item;
  list-style: none;
}
[class^="marge"]:empty{
  display:inline-block;
}
.margeTriple {
  margin-left: 15em;
}

**javatwister** · 26/11/2020, 12h17

Et un peu en marge - si je puis dire - on peut même planifier une structure récurrente à moindre frais:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.marge {display:list-item;list-style:none;}
.marge:nth-child(3n+1){margin-left:5em;}
.marge:nth-child(3n+2){margin-left:10em;}
.marge:nth-child(3n+3){margin-left:15em;}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<p>
texte basique
   <span class="marge">un texte plus loin</span>
   <span class="marge">un texte encore plus loin</span>
   <span class="marge">un texte encore vachement plus loin</span>
texte basique
  <span class="marge">un texte plus loin</span>
   <span class="marge">un texte encore plus loin</span>
   <span class="marge">un texte encore vachement plus loin</span>
texte basique
   <span class="marge">un texte plus loin</span>
   <span class="marge">un texte encore plus loin</span>
   <span class="marge">un texte encore vachement plus loin</span>
texte basique
   <span class="marge">un texte plus loin</span>
   <span class="marge">un texte encore plus loin</span>
   <span class="marge">un texte encore vachement plus loin</span>
</p>

Créer une tabulation

HTML

Discussions similaires

Partager

Partager