18008 sujets

Questions générales et questions de débutants

Empêcher saut de ligne html

Smiley biggrin Bonjour,
Je suis débutant et je modifie un template HTML sur un Google Sheet. J'aimerais avoir une icône puis un hyperlien à la suite, le problème c'est qu'à chaque fois il y a un retour de ligne après l'icône. Voici le code:
<i class="material-icons blue">keyboard_arrow_right</i><a href="{{Title}}" target="_blank" onclick="ga('send', 'event', '{{Chapter}}', '{{Link}}', '{{Language}}');"><div class="hse">{{Title}} <img src="https://sites.google.com"/></div>
</a>

Le retour à la ligne intervient entre l'icône du i class et le lien du a href, pourriez-vous m'aider à empêcher ce retour à la ligne?

Merci d'avance !
R.
Y'a une <div> *dans* un <a>. Je crois que ça ne se fait pas. Et je pense que c'est pour ça que ça retourne à la ligne.
Salut,

Voilà ce que je te propose pour que ton lien ne passe pas à la ligne :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>keyboard</title>
	<style>
		i, div{float: left;}
	</style>
</head>
<body>
  <i class="material-icons blue">keyboard_arrow_right</i>
  <div class="hse">
    <a href="{{Title}}" target="_blank" onclick="ga('send', 'event', '{{Chapter}}', '{{Link}}', '{{Language}}');">
		{{Title}}
		<img src="https://sites.google.com"/>
	</a>
  </div>
</body>
</html>

Il faut juste placer un :
float: left;
aux balises <i> et <div> pour qu'elles restent sur la même ligne parce que par défaut ces balises sont de type bloc et donc passent à la ligne automatiquement.

J'ai placé le style dans le <head>, pour simplifier, mais il serait plus judicieux que tu le places dans une feuille de styles CSS et que tu l'associes avec la page HTML au moyen de la balise <link> dans le <head> :

<link href="styles.css" type="text/css" rel="stylesheet">

Enfin, j'ai replacé le lien <a> dans la <div> parce qu'il était mal placé.

Tu devrais avoir ce résultat :
upload/1653458281-62242-capture.png
++
Modifié par ObiJuanKenobi (26 May 2022 - 19:56)
Prévenir un modérateur
Répondre au sujet
Aller à