Javascript 使用jQuery创建组合按钮时显示不正确

我正在使用jQuery在我的Chrome扩展中创建一组组合按钮：

for( var i = 0, format; format = phoneFormats[i]; ++i ) {
    var input = $('<input>', {
        style: 'width: 400',
        type: 'radio',
        name: 'phone-format-radio',
        value: i,
        text: GetDisplayNumber( format )
    }).after( '<br/>' );

    $(id + ' > button').before( input );
}

当前输出有两个主要问题。首先，除非我显式地设置每个输入元素的宽度，否则它们的宽度不考虑组合框旁边的文本。其次，组合按钮显示在文本的右侧，而不是左侧

---

如果我在HTML中手动创建这些组合按钮，它们的结构就很好。我对jQuery有什么问题吗？

就您在评论中提出的问题而言，即为什么没有为我的单选按钮指定默认宽度，即其文本的大小，以及为什么单选按钮位于文本的右侧而不是左侧。单选按钮或与此相关的任何元素都没有内容。因此，文本渲染的位置或多或少取决于浏览器的情绪。通常的结构如下所示：

<input type="radio" id="x" /><label for="x">Your text here</label>

---

在普通的HTML中，我看到这项工作没有标记。例如，此处的文本。。。。我想在jQuery中模拟这个，但我想不出来。您的解决方案需要的语法比我想要的多得多。有没有办法让它像我所说的那样工作？@Robert Daily:浏览器会隐式关闭，当你在这里写文本时，浏览器会像你在这里的文本一样解释它，而不是像你在这里的文本；您的jQuery正在尝试生成最后一个版本，但不会，因为它不是有效的HTML。正确的版本只需多出几行，而且还可以点击标签，而不仅仅是小小的单选按钮。

for(var i = 0, format; format = phoneFormats[i]; ++i) {
    var input = $('<input>', {
        id: 'phone-format-radio-' + i,
        style: 'width: 400',
        type: 'radio',
        name: 'phone-format-radio',
        value: i
    }).after(
        '<label for="phone-format-radio-' + i + '">'
        + GetDisplayNumber(format)
        + '</label><br/>'
    );
    $(id + ' > button').before( input );
}