javascript - 为什么动态制作时行不是宽度的 100%？

Question

你能告诉我为什么行没有占用 100% 的宽度吗？我按照以下步骤操作。按“添加大小写按钮”。它会生成一行。选择“添加大小写”选项并按添加它会生成内行。但它的宽度不是 100%。

function addNewCaseInside(id){
    //add new inside collapsible inside collapsible row.

    alert($("#list" +id));
    $('#'+id).append('<ul><li >' +
            '<div data-role="collapsible">' +
            '<h3>nnnn</h3>' +
            '<ul>' +
            '<li>' +
            '<fieldset data-role="controlgroup" class="Smoker">' +
            '<input type="radio" name="radio-choice" id="radio-choice-1" value="TestCase" checked="checked">' +
            '<label for="radio-choice-1">Add Test Case</label>' +
            '<input type="radio" name="radio-choice" id="radio-choice-2" value="TestCommand">' +
            '<label for="radio-choice-2">Add Test Command</label>' +
            '</fieldset>' +
            '<a  data-role="button" data-mini="true" data-theme="a" class="addClickClass">Add</a>' +
        '</li>' +
            '</ul>' +
            '</div>' +
            '</li><ul>')
            $('#'+id).trigger('create');





}

Answer 1

如果你在 fiddle 中测试，你需要重置样式。默认情况下，浏览器将样式应用于 UL 元素(在本例中为 padding-left)。因此，如果您将重置样式包含在您的 fiddle 中，它将按预期工作。

当然你可以不用notmalize.css就这么简单地修复它:

.ui-collapsible-content ul {padding: 0;}

演示:http://jsfiddle.net/R2DzV/22/

另请注意，对于实际的移动设备，您可能不需要 reset.css，因为其浏览器可以具有不同的用户代理默认样式表，而不会出现此类不良行为。