Fieldset上的奇怪传奇布局

Question

为什么图例'描述'在第二个字段集的边框下面？

两个字段集对我来说都是对称的（暂时）。

编辑：javascript代码和jsfiddle链接

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();

jsfiddle link

Answer 1

您错误地拼写了legend，这意味着浏览器没有给出默认样式：

<lengend>Description</lengend>

在JavaScript中，您需要更改：

 descFieldSet.append($('<lengend/>', {text: 'Description'}));

要：

 descFieldSet.append($('<legend/>', {text: 'Description'}));

Working JSFiddle demo