18049 sujets

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

[Résolu] Alignement des input

bonjour
j'ai 3 champs (3 label et 3 input) nom, prénom, email. comment faire pour que les champs input soit alignés verticalement en .css? je veux la script .css pour input uniquement
merci
bonjour
j'ai trouvé la question est ce que cela est responsive?
input {
	position: fixed;
	left: 70px;
}

Modifié par gcyrillus (19 Nov 2024 - 09:36)
Modérateur
Bonjour,

Il faudrait le html correspondant. Parce que sans le html, on ne peut pas proposer de code css approprié.

Amicalement,
bonjour

voici le code du HTML embeded avec php

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Page de saisie d'un nom">
    <title>inscription </title>
	<link rel="stylesheet" href="./include/styles.css">
</head>

<form action="inscription_query.php" method="post">
	<br><br><br><br>

	<div>
		<label for="prenom"> Pseudo </label>
		<input type="text" name="nickname" id="nickname" required>
	</div>
	<br>
	<div>
		<label for="email"> Email  </label>
		<input type="email" name="email" id="email" required>
	</div>
	<br>
	<div>
		<label for="pass"> Mot de passe   </label>
		<input type="password" name="pass" id="pass">
	</div>
	<br> 

	<button type="submit"> M'inscrire </button>	
</form>


<?php	
	include_once "./include/footer.php";
?>

Modifié par gcyrillus (19 Nov 2024 - 09:36)
el fichier .css




label {
    width: 100px; /* Fixe la largeur des labels pour les aligner verticalement */
    text-align: right;
    margin-right: 10px;
}

input {
	position: fixed;
	left: 100px;
}

Modifié par gcyrillus (19 Nov 2024 - 09:37)
Modérateur
Bonjour,

Le positionement ne sert pas à créer la mise en page, absolute et fixed sont des pièges à débutants.
Autant que possible, remplacer les br par des marges lorsqu'ils se trouvent entre deux balises de type block.

Aujourd'hui, grid et flex sont fait pour ce genre de choses.

Voici un exemple sans br ni positionement CSS:
<form action="inscription_query.php" method="post">
  <p>
    <label for="prenom"> Pseudo </label>
    <input type="text" name="nickname" id="nickname" required>
  </p>
  <p>
    <label for="email"> Email </label>
    <input type="email" name="email" id="email" required>
  </p>
  <p>
    <label for="pass"> Mot de passe </label>
    <input type="password" name="pass" id="pass">
  </p>
  <button type="submit"> M'inscrire </button>
</form>

form {
  text-align: center;
}
form p {
  display: grid;
  grid-template-columns: 6.5em auto;
  max-width: max-content;
  margin: 1em auto;
  gap: 1em;
}
form p label {
  text-align: end;
}


J'ai éditer tes post pour formater tes extraits de code , c'est lisible pour ceux qui t'aideront.

Il y a des ressources ici pour la mise en page en grilles : https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html et https://www.alsacreations.com/astuce/lire/1739-CSS-Grid-Layout-les-ressources-indispensables-pour-apprendre.html - https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html

cdt
Modifié par gcyrillus (19 Nov 2024 - 11:48)
Prévenir un modérateur
Répondre au sujet
Aller à