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> 

그리고 자바 스크립트/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

이 레이블이 제대로 정렬됩니다 있는지 확인합니다.