Fieldset 上的奇怪图例布局答案

【问题标题】：Strange Legend Layout on FieldsetFieldset 上的奇怪图例布局
【发布时间】：2014-07-22 08:04:14
【问题描述】：

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

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

编辑：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

【问题讨论】：

你能发个小提琴吗？
你能在 jsfiddle 重现这个问题吗？它对我来说很好。
已添加。会不会和jQuery动态添加html元素有关？

标签： html legend fieldset

【解决方案1】：

您拼写错误legend，这意味着浏览器没有为其提供默认样式：

<lengend>Description</lengend>

在你的 JavaScript 中你需要改变：

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

收件人：

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

Working JSFiddle demo.

【讨论】：