Problème alignement CSS

Ce topic a été résolu
Louis_09

Louis_09 Le 10 octobre 2016 à 21:13 (Édité le 25 janvier 2019 à 17:52)

Bonjour, j’ai un petit problème d’alignement avec mon formulaire. Enfaîte la case « Code d’accès » n’est pas parfaitement aligné avec la case « Valider ». Voir image ici

Voici le code de mon formulaire : 

<html>
<head>
 
  <meta charset="UTF-8">
 
  <title>Connexion</title>
 
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
 
</head>
 
<body>
 
  <span href="#" class="button" id="toggle-login">Avancement de votre site</span>
 
<div id="login">
  <div id="triangle"></div>
  <h1>Connexion</h1>
   
   
  <form method="post" action="secret.php" />
    <p>   
    <input type="password" name="mot_de_passe" placeholder="Code d'accès" />
    <input type="submit" value="Valider" />
    </p>
  </form>
</div>
 
  <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
 
  <script src="js/index.js"></script>
 
</body>
 
</html>

Et voici le code CSS de mon formulaire : 

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
 
*{margin:0;padding:0;}
 
body{
  background:#FFFF;
  font-family:'Open Sans',sans-serif;
}
 
.button{
  width:100px;
  background:#0074D9;
  display:block;
  margin:0 auto;
  margin-top:1%;
  padding:10px;
  text-align:center;
  text-decoration:none;
  color:#fff;
  cursor:pointer;
  transition:background .3s;
  -webkit-transition:background .3s;
}
 
.button:hover{
  background:#0074D9;
}
 
#login{
  width:400px;
  margin:0 auto;
  margin-top:8px;
  margin-bottom:2%;
  transition:opacity 1s;
  -webkit-transition:opacity 1s;
}
 
#triangle{
  width:0;
  border-top:12x solid transparent;
  border-right:12px solid transparent;
  border-bottom:12px solid #0074D9;
  border-left:12px solid transparent;
  margin:0 auto;
}
 
#login h1{
  background:#0074D9;
  padding:20px 0;
  font-size:140%;
  font-weight:300;
  text-align:center;
  color:#fff;
}
 
form{
  background:#f0f0f0;
  padding:6% 4%;
}
 
input[type="email"],input[type="password"]{
  width:92%;
  background:#fff;
  margin-bottom:4%;
  border:1px solid #ccc;
  padding:4%;
  font-family:'Open Sans',sans-serif;
  font-size:95%;
  color:#555;
}
 
input[type="submit"]{
  width:100%;
  background:#0074D9;
  border:0;
  padding:4%;
  font-family:'Open Sans',sans-serif;
  font-size:100%;
  color:#fff;
  cursor:pointer;
  transition:background .3s;
  -webkit-transition:background .3s;
}
 
input[type="submit"]:hover{
  background:#2288bb;
}

Est-ce que quelqu'un pourrait m'aider à résoudre ce problème ? 
Balatharas

Balatharas Le 12 octobre 2016 à 18:27

Bon.. Va falloir apprendre a utiliser
les balises codes, parce que là mes yeux saignent.
Sinon, ce n'est aucunement un problème d'alignement, mais il suffit juste d'augmenter la taille de ton input....
Azee

Azee Le 14 octobre 2016 à 22:50

Mes yeux lol 😰
Balatharas

Balatharas Le 15 octobre 2016 à 21:25

Pour augmenter la taille de ton input il suffit de mettre un padding-right
TheOldNoob

TheOldNoob Le 16 octobre 2016 à 18:00

Salut l'ami,
Ton input type password fait 92% de largteur (widht) alors que tes input submit font 100%
Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte