Html 字段集上奇怪的图例布局

为什么图例“描述”出现在第二个字段集的边界下方

两个字段集对我来说似乎是对称的（目前）

编辑：javascript代码和JSFIDLE链接

NounEditor = function() {
var nc = {}; //private members
nc.DIV = $('<form/>');

var nameFieldSet = $('<fieldset/>').appendTo(nc.DIV);
nameFieldSet.append($('<legend/>', {text: 'Name'}));

for(var i=0; i<2; i++){
    var nameDiv = $('<div/>', {text: "lang" + i })
    .append($('<input/>', {
        style: 'display: inline-block'}));
    nameFieldSet.append(nameDiv);
}
nc.DIV.append($('<p/>'));
var descFieldSet=$('<fieldset/>').appendTo(nc.DIV);
descFieldSet.append($('<lengend/>', {text: 'Description'}));
for(var i=0; i<2; i++){
    var descDiv = $('<div/>', {text: "lang" + i })
    .append($('<input/>', {
        style: 'display: inline-block'}));
    descFieldSet.append(descDiv);
}

nc.DLG = nc.DIV.dialog({
    title: 'noun editor',
    modal: false, autoOpen: false,
    close: function() {
        $(this).remove();
    }
});

this.show=function(){
    nc.DLG.dialog('open');
}

} // class NounEditor

var dlg = new NounEditor();
dlg.show();

NounEditor=function（）{
var nc={}；//私有成员
nc.DIV=$（''）；
变量nameFieldSet=$（''）.appendTo（nc.DIV）；
追加（$（''，{text:'Name'}））；
对于（var i=0；i您拼写的
图例
不正确，这意味着浏览器没有为其提供默认样式：

<lengend>Description</lengend>

说明

在JavaScript中，您需要更改：

descFieldSet.append（$（''，{text:'Description'}））；

致：

descFieldSet.append（$（''，{text:'Description'}））；

.
你能发一篇文章吗？你能在JSFIDLE上重现这个问题吗？它对我来说很好。添加。它能通过jQuery动态添加html元素吗？