CSS do wyrównania etykiety i wejścia

Fragment kodu HTML: 

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

Używając tylko CSS (lub jquery), niezależnie od rozmiaru przeglądarki, chcę sparować elementy label I input obok siebie. Mam również swobodę zmiany tweak HTML. w razie potrzeby.

Author: hashg, 2011-01-09
Source

6 answers

Jest to jedna z tych rzeczy, które mogą być zaskakująco trudne do poprawienia.

Wiele osób zaproponuje użycie float:left; do tego celu. Osobiście bardzo nie lubię pływaków; wydają się powodować więcej problemów niż rozwiązują.

Preferuję użycie inline-block. Jest to metoda wyświetlania, która łączy właściwości inline (dzięki czemu można łatwo wyrównać elementy obok siebie, itd.) z właściwościami blokowymi (takimi jak możliwość określania wymiarów).

Więc odpowiedź jest po prostu do Ustaw oba znaki display:inline-block; i nadaj monitom stałą szerokość, co sprawi, że pola wejściowe obok nich będą wyrównywane.

Będziesz również potrzebował jakiegoś kanału lub przerwy po polu wprowadzania, w przeciwnym razie następny monit pojawi się w tej samej linii, co nie jest pożądanym efektem. Najlepszym sposobem na osiągnięcie tego celu jest umieszczenie każdego znaku zachęty i jego pola w kontenerze <div>.

Więc twój HTML będzie wyglądał tak: 

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

A Twój CSS będzie wyglądał tak: 

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

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

Mam nadzieję, że pomaga.

Edit : możesz użyć tej wtyczki do Ustawienia szerokości każdej etykiety: 

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); 
}

Z tej strony w komentarzu

I używasz go w ten sposób: 

$("div.myfields div label").autoWidth();
I to wszystko... wszystkie etykiety będą miały szerokość najdłuższej etykiety
 84
Author: Spudley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-06 12:02:16

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

 10
Author: Shahid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-09 19:58:30

Umieść każdą etykietę z odpowiadającym jej wejściem w znacznik P. Następnie dodaj następujący css: 

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
Author: amosrivera,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-09 19:56:33

Myślę, że używanie javascript do prostej sztuczki css jest przesadą. Oto ten, który właśnie zrobiłem.: http://jsfiddle.net/t6R93/ 

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

PS: może mieć wady w innych przeglądarkach. Testowałem tylko z chromem.

 1
Author: egiray,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-15 18:32:55

Nie ma potrzeby używania JavaScript, jQuery ani dodatkowych divs. wystarczy:

  • Float both input and label to left (zauważ, że input musi być block, aby floatować).
  • Dodaj clear: both do label.
  • ustawić stałą szerokość (np. 100px) na label.

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
Author: Michał Perłakowski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-07 21:14:29

Byłem ciekaw, czy można to zrobić z "naturalnymi" znacznikami semantycznymi, tzn. bez semantycznych elementów opakowujących i z label zawierającymi odpowiadające mu input, zamiast odwoływać się do niego z lekko niezgrabnym atrybutem for: 

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

Etykieta o stałej szerokości nie wyrówna tutaj wejść, ponieważ tekst nie jest oddzielnym elementem, a elegancko Minimalne rozwiązanie Shahida też nie działa, ale jeśli chcesz, aby wszystkie wejścia były tej samej szerokości (co IMHO i tak ładnie wygląda) można float them 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; }

-moz-box-sizing powinien być zbędny, gdy ff29 jest zwolniony, a nawet box-sizing nie jest potrzebny, chyba że mieszasz typy form control. clear i overflow są szczególnie potrzebne dla textarea.

Pełny przykład typu mieszanego: 

<!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
Author: mrec,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-03 17:44:41