CSS для выравнивания метки и ввода - PullRequest
Новая
       10

CSS для выравнивания метки и ввода

39 голосов
/ 09 января 2011

Фрагмент кода 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>

Используя только CSS (или jquery), независимо от размера браузера, я хочу соединить элементы метки и ввода рядом друг с другом.У меня также есть свобода изменять твик HTML.если требуется.

Ответы [ 6 ]

84 голосов
/ 09 января 2011

Это одна из тех вещей, которая может быть на удивление хитрой, чтобы получить право.

Многие люди предложат использовать для этого float:left;.Лично мне очень не нравятся поплавки;кажется, они вызывают больше проблем, чем решают.

Я предпочитаю использовать inline-block.Это метод отображения, который объединяет встроенные свойства (так что вы можете легко выровнять элементы рядом друг с другом и т. Д.) Со свойствами блока (например, возможность указать размеры).

Поэтому ответ состоит в том, чтобы просто сделать ихи display:inline-block;, и задайте для команд фиксированную ширину, что сделает поля ввода рядом с ними выровненными.

Вам также понадобится какой-то перевод строки или разрыв после поля ввода, в противном случае следующийзапрос появится в той же строке, что не является желаемым эффектом.Лучший способ добиться этого - поместить каждое приглашение и его поле в контейнер <div>.

Так ваш HTML будет выглядеть так: 

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

и ваш CSS будет выглядеть такэто: 

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

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

Надеюсь, что поможет.

Редактировать : вы можете использовать этот плагин для установки ширины каждой метки: 

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

с этой страницы в комментарии

и вы используете это следующим образом: 

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

и это все ... все ваши ярлыки будут занимать ширинусамой длинной этикетки

10 голосов
/ 09 января 2011

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

1 голос
/ 08 января 2016

Нет необходимости использовать JavaScript, jQuery или дополнительные div s. Вам просто нужно:

  • Плавающие и input и label влево (обратите внимание, что input должен быть блоком, который должен быть перемещен).
  • Добавить clear: both к label.
  • Установить фиксированную ширину (например, 100px) на 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 голос
/ 15 ноября 2013

Я думаю, что использование javascript для простого трюка css является излишним. Вот тот, который я сделал только сейчас: http://jsfiddle.net/t6R93/

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

PS: у него могут быть недостатки с другими браузерами. Я тестировал только с Chrome.

1 голос
/ 09 января 2011

Поместите каждую метку с соответствующим вводом в тег ap.Затем добавьте следующий 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>
0 голосов
/ 03 апреля 2014

Мне было любопытно посмотреть, можно ли это сделать с помощью "естественной" семантической разметки, то есть без несемантических элементов-оболочек и с label, содержащим соответствующие input, вместо того, чтобы ссылаться на него с помощью немного неуклюжий for атрибут: 

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

Метка фиксированной ширины не будет выравнивать входные данные здесь, потому что текст не является отдельным элементом, и элегантно минимальное решение Шахида также не работает, но если вы хотите сделать все входные данные одинаковой ширины ( ИМХО в любом случае выглядит красиво) вы можете float их 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 должен быть избыточным при отпускании FF29, и даже box-sizing не требуется, если вы не смешиваете типы элементов управления формой. clear и overflow специально необходимы для textarea.

Пример полного смешанного ввода: 

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