jQuery + label tag

Очередной, очень маленький, но ужасно удобный trick.

Суть очень простая, он автоматически делает  одинаковый width для всех элементов <label>.

Изначально форма выглядит примерно вот так:

before jQuery + label tag

Добавляем стиль:

label, input[type="text"]{
    float:left;
    display:block;
}
label{
    margin-right: 5px;
}
.field{
    width:100%;
    overflow:auto;
    margin:5px 0px;
}

Добавляем javascript:

$(document).ready(function() {
    var max = 0;
    $("label").each(function(){
        if ($(this).width() > max)
            max = $(this).width();
    });
    $("label").width(max);
});

И вуаля:

after jQuery + label tag

Похожие записи

Комментарии:

  1. shattl 2 июля 2009 в 14:38Ответить

    ок

    будем использовать!

  2. Выравнивание колонок с помощью CSS « Future Colors Blog 17 августа 2009 в 09:57Ответить

    [...] Добиться, чтобы поля ввода находились друг под другом, и при этом их положение определялось максимальной длиной заголовка поля слева. Решение не должно использовать таблиц и JavaScript. [...]

  3. Лигалайз + П13 — Провокация (Remixed Album 2003) | Rpsl 23 июля 2010 в 13:16Ответить

    [...] что пох. айм э смокер.Сюда приходят по следующим фразамjquery label forГуф мудакslim spice babyпочему в контакте нельзя смотреть [...]

  4. Ломография | Rpsl 26 июля 2010 в 18:19Ответить

    [...] приходят по следующим фразамслим альбомы 2010jquery label forо фильме классгалереи фотографий на mootolsvk виджетhtml tags [...]

Написать комментарий