Horizontale Ausrichtung von zwei nebeneinander liegenden Eingabeelementen unter zwei Eingabeelementen

Ich habe zwei Eingabeelemente innerhalb eines div zentriert und versuche, zwei untergeordnete Elemente unter ihnen zu platzieren. HierHorizontale Ausrichtung von zwei nebeneinander liegenden Eingabeelementen unter zwei Eingabeelementen

ist, was ich möchte das Ergebnis sein:

Stattdessen werden die beiden einreichen Tasten sind nicht perfekt mit den Eingabeelementen ausgerichtet sind (ich glaube, das ist mit float: left; zu tun:

input[type="text"] { 
 
margin: 0 auto; 
 
width: 70%; 
 
display: block; 
 
} 
 

 
input[type="submit"] { 
 
margin: 0 auto; 
 
width: 35%; 
 
display: block; 
 
float: left; 
 
}

<input type="text"> 
 
<br> 
 
<input type="text"> 
 
<br> 
 
<input type="submit"> 
 
<input type="submit">

Quelle

2016-12-24 The Codesee

ehrliche Frage ... warum zwei Tasten einreichen? – Jhecht

@Jhecht Speichert die Notwendigkeit, zwei separate Foren zum Anmelden und Registrieren zu haben :) –

Wenn Ihre Anmelde-/Registrierungsformulare die gleichen Felder haben (normalerweise fragt ein Registrierungsformular nach E-Mail und Benutzername usw.), dann haben Sie Ihren Server -Seite Code den Datensatz einfügen, wenn man nicht gefunden wird und dann einloggen? Das bedeutet nur 1 Knopf! – Jhecht

Remove Schwimmer ein nd set text-align: center auf Elternelement.

body { 
 
    text-align: center; 
 
} 
 
input[type="text"] { 
 
    margin: 0 auto; 
 
    width: 70%; 
 
    display: block; 
 
} 
 
input[type="submit"] { 
 
    margin: 0 auto; 
 
    width: 35%; 
 
}

<input type="text"> 
 
<br> 
 
<input type="text"> 
 
<br> 
 
<input type="submit"> 
 
<input type="submit">

Quelle

2016-12-24 21:32:44

Ich mag deine besser als meine, weil es das HTML nicht ändert, wie ich es tue. – Jhecht

Brillante Antwort, Prost. Ist es möglich, den Abstand zwischen den beiden Senden-Schaltflächen zu entfernen? –

Es könnte ein weiterer Weg, es zu tun, aber der einfachste Weg, ich kenne ist, diese beiden Elemente in einem übergeordneten Elemente zu wickeln und einfach anzuwenden die gleiche Marge/Breite

input[type="text"] { 
 
    margin: 0 auto; 
 
    width: 70%; 
 
    display: block; 
 
} 
 
input[type="submit"] { 
 
    width: 50%; 
 
    display: block; 
 
    float: left; 
 
} 
 
.center-70 { 
 
    margin: 0 auto; 
 
    width: 70%; 
 
}

<input type="text"> 
 
<br> 
 
<input type="text"> 
 
<br> 
 
<div class="center-70"> 
 
    <input type="submit"> 
 
    <input type="submit"> 
 
</div>

Quelle

2016-12-24 21:33:00 Jhecht

Es gibt mehrere Möglichkeiten, dies zu lösen.

Dies ist einer von ihnen:

div.container { 
 
    width: 70%; 
 
} 
 
input[type="text"] { 
 
margin: 0 auto; 
 
width: 100%; 
 
display: block; 
 
} 
 

 
input[type="submit"] { 
 
margin: 0 auto; 
 
width: 50%; 
 
display: block; 
 
float: left; 
 
}

<div class="container"> 
 
<input type="text"> 
 
<br> 
 
<input type="text"> 
 
<br> 
 
<input type="submit"> 
 
<input type="submit"> 
 
</div>

Quelle

2016-12-24 21:34:00 Dekel

Horizontale Ausrichtung von zwei nebeneinander liegenden Eingabeelementen unter zwei Eingabeelementen

Antwort

Verwandte Themen