0

我用 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 个字符）：一切都很好对齐，但看起来很丑！

我能做些什么 ？

4

1 回答 1

1

添加clear:left;到您的.label-class

这将确保标签正确对齐。

于 2012-12-17T18:20:08.040 回答