Intel XDK의 목록 보기에 썸 이미지 삽입

Question

내 프로젝트에서 Intel XDK의 목록 보기 템플릿을 사용하고 있습니다. 각 목록에서 이미지의 축소판을 사용하고 싶습니다.해결 방법이 있나요?나는 HTML 개발이 처음이기 때문에

Answer 1

내에서 수동으로 코드를 추가할 수 있습니다. <li> 생성할 요소 <img> 요소.다음은 이미지 썸네일 + 텍스트로 사용자 정의 목록을 생성하는 예제 코드입니다. 사용자 정의 목록 보기

<style>
    #afui #listview .list li {padding:10px 20px 10px 10px}
    .list-image {float:left;width:50px;height:50px}
    .list-text {margin-left:60px;min-height:50px}        
</style>

관습 <li>:

    <ul class="list">
        <li>
            <a href="#item1">
                <img class="list-image" src="data/male_user_icon.svg" />
                <div class="list-text"><b>username1</b><br>Placeholder text for this list item 1.</div>
            </a>
        </li>
    </ul>