Ankündigung

Einklappen
Keine Ankündigung bisher.

label + textfeld mit bestimmten abständen zueinander?

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • nothpole88
    hat ein Thema erstellt label + textfeld mit bestimmten abständen zueinander?.

    label + textfeld mit bestimmten abständen zueinander?

    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
    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 ?

  • monolith
    antwortet
    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>
    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; } 
        .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>
    Auf die Art macht das z. B. Bootstrap: http://getbootstrap.com/css/#forms-horizontal

    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.

    Einen Kommentar schreiben:


  • Sakron
    antwortet
    Wie wäre es mit ner einfachen Tabelle? ^^

    Einen Kommentar schreiben:


  • rkr
    antwortet
    Zitat von nothpole88 Beitrag anzeigen
    o_o
    http://en.m.wikipedia.org/wiki/North
    O.O

    Einen Kommentar schreiben:


  • nothpole88
    antwortet
    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

    Einen Kommentar schreiben:


  • rkr
    antwortet
    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.

    Einen Kommentar schreiben:


  • Tropi
    antwortet
    <label> kennst du? Im einfachsten Fall setzt du das auf eine fixe Breite, und schon steht alles untereinander.

    Einen Kommentar schreiben:

Lädt...
X