Créer une tabulation

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

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, 12h35

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, 17h57

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 : 2473
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 : 2642
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, 18h53

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, 19h29

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, 12h12

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

Créer une tabulation

HTML

Vue hybride

Discussions similaires

Partager

Partager