18041 sujets

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

Aligner un <input type="search"/> avec <p>

bonjour tout le monde,

Je suis en train d'aligner un <input type="search"/> avec <p> mais sans toucher au design déjà fait. Voici les codes HTML et CSS:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="style1.css"/>
		<title>Fonctionnalités évoluées</title>
	</head>
	<body>
		<p class="un">
			RECHERCHER
		</p>
		<p class="deux">
			INSCRIPTION / IDENTIFICATION
		</p>
		<p class="trois">
			Parmi plus de 20 000 articles et 3 000 vidéos !
		</p>
		<input type="search" class="quatre"/>
	</body>
</html>




.un
{
	border: 4px solid black;
	width: 20%;
	display: inline;
}
.deux
{
	display: inline-block;
	width: 20%;
	border: 4px solid black;
	margin-left: 600px;
	margin-top: -4px;
}
.trois
{
	border: 4px solid black;
	width : 30%;
	margin-top: -20px;
}


Aidez-moi svp, merci Smiley biggrin
J'ai essayé d'appliquer display à l'input avec les valeurs: inline, block et inline-block mais en vain
Modérateur
Bonjour,

Aligner l'input avec lequel des 3 <p> ?
Qu'est-ce que t'entend par "ne pas toucher au design" ?
Hassine a écrit :
... mais sans toucher au design déjà fait.

Dommage, car le code n'est déjà pas bon à la base : trop de répétitions.

Et donc : vous voulez quoi au juste ? Parce que la demande n'est pas claire et quand on teste l'exemple, on ne voit pas trop ce que vous cherchez à faire... Aligner p.un avec l'input ?

Voici une page en ligne
Je veux aligner <p class="trois"> avec l'input, tout en maintenant <p class="trois"> collée à <p class="un">
Pour coller la class .un avec la .trois alors que la .deux se trouve en plein milieu dans le flux je ne vois qu'une seule solution : définir la plupart des éléments en position absolute.

Évidement, c'est sale. Le mieux serait de placer les éléments dans l'ordre. , De plus, les balises html dédiées ne sont pas utilisées. Mais si vous n'avez pas la main sur le code...
Bonjour,

Pour aligner .trois avec l'input, on peut mettre un float:left sur .trois ou alors mettre une div autour de .trois et de l'input et de lui assigner un display:flex.

En espérant avoir aidé
Sujet clos
Aller à