wake-up-neo.com

CSS zum Ausrichten von Beschriftung und Eingabe

HTML-Code-Snippet:

<fieldset id="o-bs-sum-buginfo">
  <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
  <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />

  <label for="o-bs-sum-bug-ErrorNumber">Error Number</label>
  <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" />
  ....
</fieldset>

Ich verwende nur CSS (oder Jquery), unabhängig von der Browsergröße, und möchte Label- und Eingabeelemente nebeneinander koppeln. Ich habe auch die Freiheit, Tweak the HTML zu ändern. Falls erforderlich.

jqueryhtmlcssinputlabels
39
hashg

Dies ist eines der Dinge, die überraschend schwierig sein können, um richtig zu werden.

Viele Leute werden die Verwendung von float:left; dafür vorschlagen. Persönlich mag ich Schwimmern wirklich nicht; Sie scheinen mehr Probleme zu verursachen, als sie lösen.

Ich bevorzuge den Inline-Block. Dies ist eine Anzeigemethode, die Inline-Eigenschaften (um Elemente auf einfache Weise nebeneinander auszurichten usw.) mit Blockeigenschaften kombiniert (z. B. Dimensionen festlegen).

Die Antwort besteht also einfach darin, beide zu display:inline-block; zu machen und den Eingabeaufforderungen eine feste Breite zu geben, wodurch die neben ihnen befindlichen Eingabefelder ausgerichtet werden.

Sie müssen auch nach dem Eingabefeld eine Art Zeilenvorschub oder einen Zeilenumbruch verwenden, andernfalls erscheint die nächste Eingabeaufforderung in derselben Zeile, was nicht der gewünschte Effekt ist. Dies erreichen Sie am besten, indem Sie jede Eingabeaufforderung und ihr Feld in einen Container <div> stellen.

So sieht Ihr HTML-Code folgendermaßen aus:

<fieldset id="o-bs-sum-buginfo" class="myfields">
  <div>
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
    <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />
  </div>

  <div>
    <label for="o-bs-sum-bug-ErrorNumber">Error Number</label>
    <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" />
  </div>
  ....
</fieldset>

und dein CSS wird so aussehen:

.myfields label, .myfields input {
  display:inline-block;
}

.myfields label {
  width:200px; /* or whatever size you want them */
}

Hoffentlich hilft das.

Edit: Mit diesem Plugin können Sie die Breite der einzelnen Etiketten festlegen:

jQuery.fn.autoWidth = function(options) 
{ 
  var settings = { 
        limitWidth   : false 
  } 

  if(options) { 
        jQuery.extend(settings, options); 
    }; 

    var maxWidth = 0; 

  this.each(function(){ 
        if ($(this).width() > maxWidth){ 
          if(settings.limitWidth && maxWidth >= settings.limitWidth) { 
            maxWidth = settings.limitWidth; 
          } else { 
            maxWidth = $(this).width(); 
          } 
        } 
  });   

  this.width(maxWidth); 
}

von dieser Seite in einem Kommentar

und du verwendest es so:

$("div.myfields div label").autoWidth();

und das ist alles ... alle Ihre Etiketten werden die Breite des längsten Etiketts annehmen

84
Spudley

#o-bs-sum-buginfo label, #o-bs-sum-buginfo input{display:inline-block;width:50%;}

10
Shahid

Es ist nicht notwendig, JavaScript, jQuery oder zusätzliche divs zu verwenden. Du musst nur:

  • Verschieben Sie sowohl input als auch label nach links (beachten Sie, dass input blockiert werden muss, um verschoben zu werden).
  • Fügen Sie clear: both zu label hinzu.
  • Legen Sie die feste Breite (z. B. 100px) auf label fest.

input {
  display: block;
  float: left;
}
label {
  float: left;
  clear: both;
  width: 100px;
}
<fieldset id="o-bs-sum-buginfo">
  <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
  <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />

  <label for="o-bs-sum-bug-ErrorNumber">Error Number</label>
  <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" />
</fieldset>

1
Michał Perłakowski

Setzen Sie jedes Etikett mit der entsprechenden Eingabe in ein p-Tag. Dann fügen Sie folgende CSS hinzu:

label{
  float:left;
  width:100px; //whatever width that suits your needs
}

p{
    margin:10px 0; //manipulate the vertical spaces for each input..  
}



<fieldset id="o-bs-sum-buginfo">
  <p>
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
    <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />
  </p>
</fieldset>
1
amosrivera

Ich denke mit Javascript für einen einfachen CSS-Trick ist Overkill. Hier ist der, den ich gerade gemacht habe: http://jsfiddle.net/t6R93/

div{
  display: table-row;
}
label,input{
  display:table-cell;
}

PS: Es kann Fehler mit anderen Browsern haben. Ich habe nur mit Chrome getestet.

1
egiray

Ich war neugierig, ob dies mit dem "natürlichen" semantischen Markup möglich ist, d. H. Ohne nicht-semantische Wrapper-Elemente und mit der label, die die entsprechende input enthält, anstatt auf das etwas klobige for-Attribut zu verweisen:

<fieldset>
  <label>Error Prefix<input/></label>
  <label>Error Number<input/></label>
</fieldset>

Eine Beschriftung mit fester Breite passt die Eingaben hier nicht an, da der Text kein separates Element ist, und die elegant-minimale Lösung von Shahid funktioniert auch nicht, aber wenn Sie bereit sind, alle Eingaben auf dieselbe Breite zu bringen (wie IMHO aussieht) Schön trotzdem) Sie können float sie right:

label { display:block; margin:8px; width:360px; clear:right; overflow:auto; }
input, button, textarea, select { box-sizing:border-box; -moz-box-sizing:border-box; width:200px; float:right; }

Der -moz-box-sizing sollte redundant sein, wenn FF29 freigegeben wird, und selbst der box-sizing wird nicht benötigt, es sei denn, Sie mischen Formularsteuerungsarten. Die clear und overflow werden speziell für textarea benötigt.

Vollständiges Beispiel für gemischte Eingaben:

<!DOCTYPE html>
<html>
  <head>
    <title>Aligned labels</title>
    <style>
      label { display:block; margin:8px; width:360px; clear:right; overflow:auto; }
      input, button, textarea, select { box-sizing:border-box; -moz-box-sizing:border-box; width:200px; float:right; }
    </style>
  </head>
  <body>
    <label>Name<input type="text" value="Sir Galahad of Camelot"/></label>
    <label>Quest<textarea>I seek the Holy Grail</textarea></label>
    <label>Favourite Colour<select><option>Blue</option><option>Yellow</option></select></label>
    <label>If you're sure...<button>Give Answers</button></label>
  </body>
</html>
0
mrec