Fieldset 上的奇怪图例布局

Posted 2023-02-16

【中文标题】Fieldset 上的奇怪图例布局

【英文标题】：Strange Legend Layout on Fieldset

【发布时间】：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元素有关？

【参考方案1】：

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

<lengend>Description</lengend>

在你的 JavaScript 中你需要改变：

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

收件人：

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

Working JSFiddle demo.