boutons d'entrée l'un à côté de l'autre, un formulaire une nouvelle page

Je veux deux boutons, l'un soumet les données, l'autre retourne à une autre page, à centrer et à côté de l'autre. Je peux centrer mais pas sur la même ligne.boutons d'entrée l'un à côté de l'autre, un formulaire une nouvelle page

Avec le code suivant utilisant 2 formes, les deux fonctions fonctionnent correctement mais un bouton est inférieur à l'autre.

<body> 
    <div id='main_body'>  
    <form action='' method="post"> 
     <input type="text" name="firstname"><br> 
     <input id ='button' type='submit' name='submit' value='Update' > 
    </form> 
    <form> 
     <form action="index.php" method="post"> 
     <input id ='button' type="submit" value="Home" /> 
    </form> 
    </div>    
</body>

Source

2017-07-30 marsheng

Pouvez-vous montrer ce que avez-vous essayé? – Tushar

Vous souhaitez ajouter un centrage vertical ou horizontal? –

Merci pour l'option flex. Je n'ai pas utilisé cela auparavant. Je veux vraiment mettre les 2 boutons d'entrée dans leur propre conteneur indépendamment du conteneur de formulaire. – marsheng

Voir ceci: Hope it helps.

main_body { 
 
    position: relative; 
 
} 
 

 
#bt1 { 
 
    position: absolute; 
 
    display: inline; 
 
} 
 

 
#bt2 { 
 
    position: absolute; 
 
    margin-left: 60px; 
 
    margin-top: 21px; 
 
}

<div id='main_body'> 
 
    <div id="bt1"> 
 
    <form action='' method="post"> 
 
     <input type="text" name="firstname"><br> 
 
     <input id='button' type='submit' name='submit' value='Update'> 
 
    </form> 
 
    </div> 
 

 
    <div id="bt2"> 
 
    <form action="index.php" method="post"> 
 
     <input id='button' type="submit" value="Home" /> 
 
    </form> 
 
    </div> 
 
</div>

Source

2017-07-30 10:54:43

Vous pouvez utiliser FlexBox pour réaliser la mise en page souhaitée. Ajoutez également des marges si vous voulez de l'espace entre les éléments. Démo:

#main_body, 
 
#main_body > * { 
 
    display: flex; 
 
    /* align-items in one column */ 
 
    flex-direction: column; 
 
    /* add horizontal centering */ 
 
    align-items: center; 
 
} 
 

 
#main_body { 
 
    /* add vertical centering */ 
 
    justify-content: center; 
 
} 
 

 
/* optional styles, just add more offset for second form */ 
 
#main_body > form + form { 
 
    margin-top: 20px; 
 
}

<div id='main_body'> 
 
    <form action='' method="post"> 
 
    <input type="text" name="firstname"><br> 
 
    <input id='button' type='submit' name='submit' value='Update'> 
 
    </form> 
 
    <form action="index.php" method="post"> 
 
    <input id='button' type="submit" value="Home" /> 
 
    </form> 
 
</div>

Source

2017-07-30 12:14:52

J'ai oublié d'ajouter le JPG. L'exemple est une version simplifiée de ma page. Les boutons doivent apparaître au bas du formulaire. – marsheng

@marsheng Mise à jour de ma réponse pour répondre à vos besoins. –

boutons d'entrée l'un à côté de l'autre, un formulaire une nouvelle page

Répondre

Questions connexes