Montag, 10. Juli 2006

HTML CSS

HTML: Formular neue Zeile verhindern

Wenn man ein einfaches HTML Formular anlegt, beginnt das Formular in einer neuen Zeile. Warum ist das so und wie kann ich es verhindern?

HTML-Formulare haben die Angewohnheit immer in einer neuen Zeile zu beginnen. Das ist normalerweise ganz Praktisch, nur möchte man manchmal neben dem Formular vielleicht etwas Text oder gar ein Bild einbauen. Dort kommt dann einem die praktische Funktion nicht entgegen, denn ein Formular ist kein inline Element, sonder ein Blockelement

Wie kann ich also den Zeilenumbruch verhindern? Die Antwort ist ganz einfach: Mit CSS!

Wir bauen also eine kleine Stylesheetanweisung (display:inline) in den Formularkopf ein und schon ist das Problem gelößt. Wie, dass könnt ihr in Listing 1 sehen



Listing 1

Download Code!

  1.  
  2. <form style="display:inline">
  3.  
Bewertung: keine, 0 Stimme(n) 2158 Klicks
Von Mr.Foo in HTML CSS am 10.07.06@14:29 Uhr

Trackbacks
Trackback für spezifische URI dieses Eintrags

Keine Trackbacks

4 Kommentare
Ansicht der Kommentare: (Linear | Verschachtelt)

Arno - #1 - 28.06.2007 14:30 - (Antwort)

Eine Frage noch: Ich habe 2 Buttons, beide in verschiedenen Formularen, kann ich mit display:inline; irgendwie hinkriegen, dass die beiden Buttons nebeneinander stehen?

Mr. Foo - #1.1 - 28.06.2007 16:23 - (Antwort)

Inputfelder sind schon inline Elemente.

Ich verstehe deinen Wunsch nicht richtig. Wie meinst du das? Zwei Formulare mit Inhalt links und die Submitbuttons rechts?

Nioc - #2 - 07.12.2008 14:58 - (Antwort)

Super. Hat alles funktioniert. Hab das inlineelement einfach ins zweite form eingebaut. :-)

Klasse

Dirk - #3 - 07.12.2009 16:14 - (Antwort)

Super! Danke für den Tipp!


Kommentar schreiben

Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Sie können [geshi lang=LANG][/lang] Tags verwenden um Quellcode abhängig von der gewählten Programmiersprache einzubinden