Я думаю, многие сталкивались с тем, что когда требуется подредактировать какую-нибудь форму, к примеру, форму обратной связи, либо создать свою с нуля, то поля в форме нужно выравнивать, ну не красиво, если все поля будут "разнокалиберными", т.е. разной ширины, поэтому их нужно будет привести к одной и той же ширине. Можно сделать это с помощью css, но можно и достаточно быстро сделать это
с помощью jquery. Форма от этого не пострадает.
Разработчик Janko Jovanovic, предложил довольно-таки простое и удобное решение для наших с вами полей. Давайте, разберемся с этим решением. Для начала добавим с вами библиотеку jquery. Как вставить jquery в html? Очень просто, сначала скачайте ее с официального сайта, набрав в поисковике jquery. Затем положите файл в папку с файлом .html, а в самом .html между тегами <head></head>, разместите такую строку - <script type="text/javascript" src="/jquery_forma_polya/jquery_1.10.2.min.js"></script> (название скрипта, пишите то, которое скачали).
fieldset label { float: left; text-align: right; } |
Теперь, сам скрипт модифицированный) неравнодушными пользователями скрипта.
$(function() { maxi = 0 $("fieldset").each(function() { $(this).find("label").each(function() { width = $(this).width() if (width > maxi) { maxi = width } }); $(this).find("label").width(maxi); maxi = 0 }); }); |
Небольшая функция, как видите, делает большое дело. В ней сначала создается переменная, которой присваивается 0. Затем скрипт выполняет фун-цию для каждого из элементов, находит label и сравнивается переменная maxi и width.
В результате мы имеем то, что имеем. Мы могли бы определить ширину полей при помощи css-стилей, просто прописав, для label, input[type="text"] - ширину в 107 пикселей, именно такую ширину имеют поля по умолчанию, но за нас это сделал скрипт, к тому же можно определить свой size для каждого поля самостоятельно, а вот если использовать правила css, то при определении ширины, мы получим поля одинаковой величины, а задача состояла определить поля верного для себя размера.
Прилагаю, то что получилось в итоге, в архиве, кому лень самому писать или что-то не получается...качайте