[HTML] Wie bekomme ich diese Zwei dinge nebeneinander?

also ich habe folgendes:

<form>
<textarea></textarea>
</form>
<button>Test</button>

normal ist der button unter der textarea, ich möchte ihn aber daneben haben. Wie geht das in Css?

Answer 1

[regex9]

Packe den Button zunächst in das form-Element, denn er gehört doch in diesen Kontext (?). Wenn er bei Klick nicht das submit-Event auslösen soll, ergänze auf ihm das type-Attribut mit dem Wert button.

<form>
  <textarea></textarea>
  <button>Test</button>
</form>

Folgend der CSS-Code (eine von vielen möglichen Lösungen):

form {
  display: table;
}

button, textarea {
  display: table-cell;
  vertical-align: bottom;
}

button {
  margin-left: 5px;
}

Noch besser als Elementselektoren wären allerdings Klassenselektoren, da die Styles somit einfacher austauschbar wären (das button-Element könnte bspw. gegen ein input-Element getauscht werden, ohne das eine Änderung des CSS-Code notwendig wäre).

Answer 2

[asored]

Da gibt es verschiedene Möglichkeiten. Die saubersten und zeitgemäßesten wären wohl folgende:

form {
  display: flex;
}

oder

textarea {
  display: inline-block;
}

Die Abstände kannst du mit Margin bestimmen:

textarea {
  margin-right: 10px;
}

Woher ich das weiß: Berufserfahrung

Answer 3

[NackterGerd]

Einfach ein GRID anlegen.

In dem Fall reichen ja 2 Felder.

In das eine kommt das <form>

In das andere kommt der <button>

Wie GRID in CSS3 funktioniert kannst du z.b. sehen unter

https://www.w3schools.com/css/css_grid.asp

https://css-tricks.com/snippets/css/complete-guide-grid/

Aber eines verstehe ich nicht ganz.

Wie soll dein Formular funktionieren?

Fehlen da nicht noch grundlegende Dinge.