Question

我动态地在列表视图中生成列表项（onclick）。你可以在这里查看我的代码： jsfiddle

因为我必须在jsfiddle链接中加上代码，所以这里是：

HTML

<div data-role="fieldcontain">Select option:
    <br>
    <select name="prodselect" id="prodselect">
        <option data-foo="xxx">first</option>
        <option data-foo="yyy" selected="selected">Second</option>
    </select>
    <input type="button" name="appeprod" id="appeprod" value="Add option" data-icon="add" data-inline="true" />
</div>
<ul name="listaproduse" id="listaproduse" data-role="listview" data-theme="c" data-divider-theme="e" data-count-theme="b" data-inset="true">
    <li data-role="list-divider">
         <h3 class="ui-li-heading">Selected options</h3>
 <span class="ui-li-count">5</span> 
    </li>
    <li id="produsele" name="produsele"></li>
</ul>

和jscript

$('#appeprod').click(function() {
    var option = $('#prodselect').val();
    var box = document.getElementById('prodselect');
    var option2 = box.options[box.selectedIndex].text;
    $('#listaproduse').append('<li><h3>'+option2+'<h3><p>'+option+'</p><p>Some comment:</p></li>');
    $('#listaproduse').listview("refresh");
});

我的问题是（正如你在jsfiddle中看到的那样）H3标签内容与下面的段落重叠。

我更新了动态列表视图下方添加的jsfiddle，这是一个静态的，具有我希望在动态列表视图中生成的相同内容。静态的一个看起来很好，而动态一个重叠。我能做什么？我怎么能避免这个？

Answer 1

您没有在JS代码中正确关闭<h3>。应该是：<h3>'+option2+'</h3>

Answer 2

您需要将此添加到样式中。我查看了添加到该元素的样式，发现margin-top是-0.5em

<强> CSS

.ui-li-desc
{
 margin-top: 0;
}

在listview里面重叠

2 个答案: