Créer une tabulation

Version imprimable

24/11/2020, 12h10
Aujor

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

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

1 2 3 4 5 Un début de texte un texte plus loin (espace de 5 caractères) un texte encore plus loin 
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 ?
24/11/2020, 12h35
ProgElecT

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.

3 pièce(s) jointe(s)

Réponse véritable

J'ai repris ton code et comme prévue, il fait qu'une seul ligne avec des grands espaces.
Pièce jointe 584882

L'écriture recommandé pour obtenir des tabulation et des sous-tabulation :
Pièce jointe 584880

J'ai juste ajouté pour sauté une ligne. Et utiliser paramétré par css pour faire ma tabulation.
Code:

1 2 3 4 5 6 Un début de texte un texte plus loin (espace de 5 caractères) un texte encore plus loin 
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.

1 pièce(s) jointe(s)

Salut

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

Code:

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

Pièce jointe 584885

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

Bonjour,

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

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 .

Peut-être un peu plus souple !

Code:

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;
}

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

Code:

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:

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>