listview 내부에서 겹치다

목록 뷰 내에서 목록 항목을 동적으로 생성합니다 (onclick). 당신은 여기 내 코드 볼 수 있습니다 : 나는 코드로 jsfiddle 링크를 동반해야하기 때문에 jsfiddle listview 내부에서 겹치다

를 간다 :

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를 동적 콘텐츠 뷰에서 생성하려는 내용과 동일한 내용으로 업데이트했습니다. 동적 인 것이 겹치는 동안 정적 인 것은 멋지게 보인다. 내가 무엇을 할 수 있을지? 어떻게 이것을 피할 수 있습니까?

출처

2013-07-10 user1137313

JS 코드에서 <h3>을 올바르게 닫지 않았습니다. 해야 할 항목 : <h3>'+option2+'</h3>

출처

2013-07-10 23:30:04 antishok

와우 .. ** 내가 AM ** 피곤 Afterall는 ... 자네 말이 맞아 여백 정상이 -0.5em 것을 발견 . 닫는 꼬리표 안에 /의 부족은 그것을했다. 변경되고 작동하는 코드는 [jsfiddle] (http://jsfiddle.net/r3Zcj/18/)입니다. (뭔가를 찾고있을 때 코드를 찾는 것을 좋아합니다. 그래서 내가 할 수있는 최소한의 것은 다른 초보자에게도 기여합니다. 나를). 다시 한번 감사드립니다. – user1137313

스타일에 추가해야합니다. 나는 그 요소에 추가 된 스타일을 보았고,

CSS

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

출처

2013-07-10 23:37:28 clurect

listview 내부에서 겹치다

답변

관련 문제