Ausrichten von HTML-Eingaben in derselben Zeile

Lesezeit: 4 Minuten

Ryan Stortz

Kann jemand eine einfache Lösung geben, wie man Formulareingaben in derselben Zeile ausrichtet? Wenn ich zum Beispiel ein Formular baue, kann ich sie oft dazu bringen, sie übereinander auszurichten, und es sieht solide aus, aber wenn ich zwei setze Bei Eingaben wie einem Textbereich/Text neben einem anderen Text oder einer Schaltfläche erhalte ich vertikale Ausrichtungsunterschiede. Gibt es eine Möglichkeit, dies zu beheben, ohne mit den Rändern und Polsterungen herumzuspielen?

ex:

<style type="text/css">
  form{
    display:inline;
  }
  textarea{
    font-size:25px;
    height:25px;
    width:200px;
  }
  input.button{
    height:25px;
    width:50px;
  }
</style>
<form>
  <textarea >Value</textarea><input type="button" class="button" value="Go">
</form>

Stellen Sie sicher, dass Sie nicht irgendwo clear:left haben

– zok

20. Juni 2012 um 21:19 Uhr

Haben Sie versucht, mit der CSS-Eigenschaft vertical-align zu spielen?

vertical-align:top;

Auf diese Weise sieht alles konsistent aus und Sie müssen nicht mit Rändern spielen.

textarea,input.button{display:inline-block;}

oder

textarea,input.button{float:left;}

Treffen Sie Ihre Wahl, je nachdem, auf welche Weise Sie vertikal herausgefordert werden

danke, aber ich kann sie auf die gleiche Linie bringen, aber wenn ich das tue, sind sie vertikal an verschiedenen Stellen. Ich habe es trotzdem mit beiden versucht und es hat keinen Unterschied gemacht.

– Ryan Stortz

20. Dezember 2011 um 14:46 Uhr
welche ausrichtung willst du? oben oder unten bündig?

– paulcol.

20. Dezember 2011 um 14:54 Uhr
Stellen Sie außerdem sicher, dass Sie einen gültigen Dokumenttyp haben, und machen Sie das Formular auch zu einem Blockelement, da Sie zuverlässigere Ergebnisse erhalten.

– paulkol.

20. Dezember 2011 um 14:57 Uhr

Hinzufügen eines vertical-align scheint arbeite für mich:

<style type="text/css">
  form{display:inline;}
  textarea{width:200px;height:25px;font-size:25px;vertical-align:middle}
  input.button{width:50px;height:25px;vertical-align:middle}
</style>
<form><textarea >Value</textarea><input type="button" class="button" value="Go"></form>

@RyanStortz: Kann ich nicht mit Sicherheit sagen. Ich bin auf Firefox 8.0 hier. Scheint auch im IE 9.0 zu funktionieren. (Obwohl es in letzterem Scroll-Schaltflächen auf der gibt textarea was hässlich ist, sollten Sie diese explizit für Browser entfernen, die sie standardmäßig hinzufügen.)

– David

20. Dezember 2011 um 14:53 Uhr
Ja, es funktioniert für mich. Ich habe eine einfache js-Funktion, die die Höhe des Textbereichs für jeden Zeilenumbruch erhöht, sodass dies kein Problem darstellt.

– Ryan Stortz

20. Dezember 2011 um 14:57 Uhr
Ich hatte das gleiche Problem, und die vertikale Ausrichtung: top hat bei mir funktioniert, mit Ausnahme des letzten Elements. Ich hatte ein select, ein div (erstellt durch das gewählte jquery-Plugin), einen Eingabetext und einen Eingabetyp=submit. Die Steuerelemente sind alle ausgerichtet, mit Ausnahme der Schaltfläche, die einige Pixel niedriger ist als die anderen Steuerelemente.

– Marlon

4. August 2012 um 15:23 Uhr
Tut mir leid, ich habe mein Problem entdeckt, es war eine andere CSS-Klasse, die einen Rand oben gesetzt hat: 10px. 🙁

– Marlon

4. August 2012 um 15:27 Uhr

Sie können in der Regel verwenden display:inline-block; oder float:left; Möchten Sie, dass Elemente oben oder unten ausgerichtet werden?

In Ihrem Beispiel haben Sie den Eingabetyp nicht geschlossen, es sollte sein type="button" – Ihnen fehlt ein Apos.

Gib einfach float:left zum Textbereich

http://jsfiddle.net/2qdJc/2/

Ich habe wirklich etwas gegen Floats, sie erscheinen mir einfach so zufällig, aber danke, ich denke, ich kann es jetzt zum Laufen bringen.

– Ryan Stortz

20. Dezember 2011 um 14:52 Uhr

ShaneBlake

<table>
  <tr>
    <td><input /></td>
    <td><input /></td>
  </tr>
</table>

Sicher, es bringt die CSS-Puristen dazu, sich zu winden, aber es ist sicherlich einfach …

Ich habe wirklich etwas gegen Floats, sie erscheinen mir einfach so zufällig, aber danke, ich denke, ich kann es jetzt zum Laufen bringen.

– Ryan Stortz

20. Dezember 2011 um 14:52 Uhr

TheOne LuKcian

Sie können so etwas tun (funktionierte in meinem Fall):

<div style="width:150px"><p>Start: <input  type="text" id="your_id"></p> 
  </div>

<div style="width:130px;margin-left: 160px;margin-top: -52px">
<a href="#" data-role="button" data-mini="true">Button</a>
</div>

Hier ist eine Demo: http://jsfiddle.net/gn3qx6w6/1/

Einfaches und schönes Beispiel. Vielen Dank.

– Bhargav Nanekalva

13. Mai 2016 um 14:03 Uhr

10326200cookie-checkAusrichten von HTML-Eingaben in derselben Zeile

#Ausrichtung #CSS #Eingang #html