Juxtaposer un label et une image.

**Delphi-ne** · 07/02/2018, 14h58

Bonjour,

Dans un tableau je voudrais proposer d'inverser le sens du tri à l'aide d'un système en flip/flop
Je voudrais aussi afficher juste à côté du titre de colonne le sens du tri effectué

J'ai écrit le code suivant :

Code HTML :

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

1
2
3
4
5
6
7
8
9
<body>
		<div style='width:60%;float:left;'
			 onclick='LISTE_InvestisseurTri("Nom")'>
			 <label>Investisseurs</label>
			 <img src='btn_TriDesc.png'
			 	  style='border:0px;display:block;width:10px;float:left;'
				  id='btn_TriInvNom'/>
		</div>
	</body>

Mon problème est que l'image ne se place pas juste à côté du label mais au dessous.
Que faut-il que j'ajoute pour supprimer ce saut de ligne ?
Je précise que l'image mesure 10px de haut et autant de large

Merci d'avance de vos idées

**NoSmoking** · 07/02/2018, 18h31

Bonjour,
pourquoi faire flotter ton image ?

Code :

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

1
2
3
4
5
6
img.tri-desc {
  vertical-align: middle;
  border: 0px;
  display: inline-block;
  width: 10px;
}

avec le HTML suivant

Code html :

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

1
2
3
<div style='width:60%;float:left;' onclick='LISTE_InvestisseurTri("Nom")'>
  <img class="tri-desc" src="btn_TriDesc.png">Investisseurs
</div>

Tu pourrais également utiliser un line-height: 1.5em, par exemple, directement sur la <div>.
Tu pourrais également te passer d'image.

**Delphi-ne** · 07/02/2018, 19h06

Merci beaucoup.
Cela fonctionne et, si j'ai bien compris il fallait mettre inline-block au lieu de block.

Effectivement j'ai isolé l'image dans un objet à part et avec in ID spécifique parce que le traitement modifie l'image en Javascript

Juxtaposer un label et une image.

CSS

Vue hybride

Discussions similaires

Partager

Partager