Jquery ui對話框：我無法正確對齊輸入

Question

我用jQuery UI創建了一個簡單的對話框。

HTML代碼：

<div id="newarticle-form" title="Cr&eacute;ation nouvel article"> 
    <p class="validateTips">Tous les champs sont requis.</p> 

    <form> 
    <fieldset> 
     <p><label for="validite" class="label-class">Date de validit&eacute;</label> 
     <input type="text" name="validite" id="validite" size="10" maxlength="10" class="text input-class" /></p> 
     <label for="libelle" class="label-class">Libell&eacute;</label> 
     <input type="text" name="libelle" id="libelle" size="50" maxlength="100" class="text input-class" /> 
     <label for="email" class="label-class">Description</label> 
     <input type="text" name="description" id="description" value="" size="50" maxlength="250" class="text input-class" /> 
     <label for="pu" class="label-class">Prix unitaire</label> 
     <input type="text" name="pu" id="pu" value="" size="10" maxlength="10" class="text input-class" /> 
    </fieldset> 
    </form> 
</div> 

和JavaScript/jQuery代碼：

$(function() { 
    $("#newarticle-form").dialog({ 
     autoOpen: false, 
     height: 400, 
     width: 800, 
     modal: true, 
     resizable:false, 
     buttons: { 
      "Ajouter l'article": function() { 
       var bValid = true; 
       allFields.removeClass("ui-state-error"); 
      }, 

      "Fermer": function() { 
       $(this).dialog("close"); 
      } 
     }, 

     close: function() { 
      allFields.val("").removeClass("ui-state-error"); 
     }, 
    }); 

    $("#New") 
     .click(function() { 
      $("#newarticle-form").dialog("open"); 
    }); 

}); 

一些有用的CSS：

.label-class { 
    display: block; 
    width: 150px; 
    float: left; 
    text-align: right; 
    padding-right: 10px; 
} 

.input-class { 
    float: left; 
    margin-bottom: 10px; 
} 

一切工作正常...但這些字段是完全雜亂無章。

要正確對齊，我必須給每個字段的總大小几乎等於對話框寬度的大小！所以，一個5字長的字段必須延伸到最大的字段（50個字符）：所有字段都很好對齊，但看起來相當難看！

我該怎麼辦？

Answer 1

添加clear:left;您.label-class

這將確保標籤正確對齊。