Eingabeknöpfe nebeneinander, ein Formular eine neue Seite

Ich möchte zwei Tasten, die Daten, die andere zurückgibt zu einer anderen Seite, um zentriert und nebeneinander. Ich kann zentrieren, aber nicht auf derselben Linie.Eingabeknöpfe nebeneinander, ein Formular eine neue Seite

Mit dem folgenden Code mit 2 Formularen funktionieren beide Funktionen korrekt, aber eine Schaltfläche ist unter der anderen.

<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>

Quelle

2017-07-30 marsheng

Können Sie zeigen, was haben Sie versucht? – Tushar

Sie möchten eine vertikale oder horizontale Zentrierung hinzufügen? –

Danke für die Flex-Option. Ich habe das vorher nicht benutzt. Ich möchte wirklich die 2 Eingabeknöpfe in einen eigenen Behälter unabhängig vom Formbehälter legen. – marsheng

sehen: Hoffe, es hilft.

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>

Quelle

2017-07-30 10:54:43

Sie Flexbox können gewünschte Layout zu erzielen. Fügen Sie auch Ränder hinzu, wenn Sie etwas Abstand zwischen den Elementen haben möchten. Demo:

#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>

Quelle

2017-07-30 12:14:52

Ich habe vergessen, das JPG hinzuzufügen. Das Beispiel ist eine vereinfachte Version meiner Seite. Die Schaltflächen müssen am unteren Rand des Formulars erscheinen. – marsheng

@marsheng Aktualisiert meine Antwort auf Ihre Bedürfnisse. –

Eingabeknöpfe nebeneinander, ein Formular eine neue Seite

Antwort

Verwandte Themen