PHP-Code:
<p>blub: <input type="text" name="textfield">rumgeblubber: <input type="text" name="textfield"></p>
<p>schwabbel: <input type="text" name="textfield">schwab: <input type="text" name="textfield"></p>
gibts dafür ne möglichkeit ?
-
ich möchte gerne, dass die textfelder an der gleichen stelle untereinander stehen, egal wie lang die davor stehenden labels sind. ich hab das mit einer tabelle probiert, jedoch ist das iwie nicht das richtige. mit <div> komm ich aber auh nicht so recht weiter.
gibts dafür ne möglichkeit ? -
<label> kennst du? Im einfachsten Fall setzt du das auf eine fixe Breite, und schon steht alles untereinander. -
Mit CSS lässt sich da viel machen.
Du kannst dir an sich auch mal Fertigframeworks wie Bootstrap oder Foundation (oder andere) anschauen. Da hättest du den Vorteil dass du deine Webapp recht einfach responsive erstellen kannst.Kommentar
-
mhhh, mit label scheint das nicht so richtig zu gehen. label hat doch keine size? zumindest kann ich keine nutzen o_o
wenn ich die wie hier gepostet nutze, stehen die textfelder nicht ordentlich untereinander
PHP-Code:<p><label for="vorname" >Vererereorname </label> <input id="vorname" type="text" size="15" />
<label for="vorname">Vrme </label> <input id="vorname" type="text" size="15" />
<label for="vorname">re </label> <input id="vorname" type="text" size="15" /></p>
<p><label for="vorname">Vsme </label> <input id="vorname" type="text" size="15" />
<label for="vorname">Vodame </label> <input id="vorname" type="text" size="15" />
<label for="vorname">Vornasdsdsdme </label> <input id="vorname" type="text" size="15" /></p>
Kommentar
-
-
Wie wäre es mit ner einfachen Tabelle? ^^No Sacrifice , no Glory--Kommentar
-
Eine flexiblere, aber aufwendigere Variante ist, "Zeilen" in ein div zu wrappen - dann muss man keine Maximalbreite des Containers festlegen:Code:<html> <head> <style> label { display: inline-block; width: 100px } input { width: 200px; } .container { width: 310px /* 10 px wegen (nicht sichtbarer) Leerzeichen */ } </style> </head> <body> <div class="container"> <p> <label for="vorname" >Vererereorname </label> <input id="vorname" type="text" /> <label for="vorname">Vrme </label> <input id="vorname" type="text" /> <label for="vorname">re </label> <input id="vorname" type="text" /> </p> <p> <label for="vorname">Vsme </label> <input id="vorname" type="text" /> <label for="vorname">Vodame </label> <input id="vorname" type="text" /> <label for="vorname">Vornasdsdsdme </label> <input id="vorname" type="text" /> </p> </div> </body> </html>
Auf die Art macht das z. B. Bootstrap: http://getbootstrap.com/css/#forms-horizontalCode:<html> <head> <style> label { display: inline-block; width: 100px } input { width: 200px; } .form-group{ width: 310px /* 10 px wegen Leerzeichen */ } </style> </head> <body> <p> <div class="form-group"><label for="vorname" >Vererereorname </label> <input id="vorname" type="text" /></div> <div class="form-group"><label for="vorname">Vrme </label> <input id="vorname" type="text" /></div> <div class="form-group"><label for="vorname">re </label> <input id="vorname" type="text" /></div> </p> <p> <div class="form-group"><label for="vorname">Vsme </label> <input id="vorname" type="text" /></div> <div class="form-group"><label for="vorname">Vodame </label> <input id="vorname" type="text" /></div> <div class="form-group"><label for="vorname">Vornasdsdsdme </label> <input id="vorname" type="text" /></div> </p> </body> </html>
Egal wie, mach es mit CSS - eine Tabelle wäre eine funktionierende, aber semantisch zweifelhafte Alternative. Tabellen sollen nicht zum Layouten genutzt werden. Und wenn man ehrlich ist, wäre das in diesem Fall genau die zugrundeliegende Intention.Kommentar
Kommentar