Ankündigung

Einklappen
Keine Ankündigung bisher.

label + textfeld mit bestimmten abständen zueinander?

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    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 ?
    Stichworte: -
  • #2
    <label> kennst du? Im einfachsten Fall setzt du das auf eine fixe Breite, und schon steht alles untereinander.

    Kommentar

    • #3
      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

      • #4
        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

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

          Kommentar

          • #6
            Wie wäre es mit ner einfachen Tabelle? ^^

            Kommentar

            • #7
              Zuletzt geändert von monolith; 07.08.2014, 18:04.
              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.

              Kommentar

              Vorherige Weiter
              Lädt...
              X