jQuery :: フォームの input要素 を整列させる

jqueryで、フォームの input要素 を整列させます。

• <table>タグを使わずに、きれいなレイアウトが実現できます。

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
    $(function(){
        var max = 0;
        $("span.label").each(function(){
            if ($(this).width() > max) max = $(this).width();
        });
        // ラベル左寄せ
        $("span.label").width(max).css({"float":"left", "clear":"both", "padding":"3px 0px 0px 0px"});
 
        // ラベル右寄せ
        //$("span.label").width(max).css({"float":"left", "clear":"both", "text-align":"right", "padding":"3px 0px 0px 0px"});
    });
</script>
 
<p><span class="label">氏名&nbsp;</span><input type="text" name="name" size="35"></p>
<p><span class="label">住所&nbsp;</span><input type="text" name="addr" size="35"></p>
<p><span class="label">E-mail&nbsp;</span><input type="text" name="email" size="35"></p>

• ラベルの最大横幅を計算して、よしなに調整してくれます。

氏名 

住所 

E-mail 

氏名 

住所 

E-mail 

氏名 

住所 

E-mail