마지막 항목의 아래쪽 테두리가 없습니다.

다음 HTML이있는 페이지가 있으며 JQuery Mobile UI 프레임 워크를 사용합니다. 나는 2 개의 질문을했습니다 :마지막 항목의 아래쪽 테두리가 없습니다.

1) 왜 마지막 요소의 하단 경계선이 숨겨져 있습니까? 머리글을 제거하면 나타나기 시작합니다. 하단 경계선이 숨겨지지 않도록 헤더를 유지하는 방법을 제안하십시오.

2) 로더는 페이지가로드 된 후에도 볼 유지하지 왜 - 해결 .. 내가 헤더를

감사를 폐쇄 실종됐다!

<!DOCTYPE html> 
<html> 
    <head> 
     <title>app</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
    </head> 
    <body> 
     <header data-role="header"> 

      <h1> 
       My Application</h1> 
     </header> 


     <article data-role="content"> 
      <ul data-role="listview" > 
       <li><a href="#"> 
         <h1>Heading 1</h1> 
         <img src="http://www.f-secure.com/static/img/labs_global/Icons/98/forum_bubbles_icon.png" alt="cards"/> 
         <p>Select this option to lorum ipsum</p></a> 
       </li> 
       <li><a href="#"> 
         <h1>Heading 2</h1> 
         <img src="http://www.f-secure.com/static/img/labs_global/Icons/98/forum_bubbles_icon.png" alt="cards"/> 
         <p>Select this option to lorum ipsum</p></a> 
       </li> 
       <li><a href="#"> 
         <h1>Heading 3</h1> 
         <img src="http://www.f-secure.com/static/img/labs_global/Icons/98/forum_bubbles_icon.png" alt="cards"/> 
         <p>Select this option to lorum ipsum</p></a> 
       </li> 
       <li><a href="#"> 
         <h1>Heading 4</h1>     
         <img src="http://www.f-secure.com/static/img/labs_global/Icons/98/forum_bubbles_icon.png" alt="cards"/> 
         <p>Select this option to lorum ipsum</p></a> 

       </li> 
      </ul> 
     </article> 


    </body> 
</html>

스크린 샷 : enter image description here

출처

2012-09-02 helloworld

추가 설명 - 머리글을 제거하거나 2를 말하도록 요소 수를 줄이면 아래쪽 테두리가 올바르게 나타납니다. 그러나 4 개의 요소와 머리글로 숨 깁니다. – helloworld

그것은 몸 태그입니다 .. ...

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
    </head> 
    <body> 
     [...] 
    </body> 
</html>

열기 몸 전에 당신의 머리를 닫습니다 jsfiddle here 작업.

출처

2012-09-02 10:59:08

안녕하세요. .. 내 편이라. 로더 문제를 수정합니다. 그것을 지적 주셔서 감사합니다. 그러나, 내 주요 쿼리는 여전히 열려 있습니다 :(왜 아래쪽 테두리가 목록보기의 마지막 요소 아래에 나타납니다.) – helloworld

문제의 근본이 보이지 않지만 ul이 도움을 준 후 을 추가했습니다. 업데이트 된 [fiddle]을 확인하십시오. http://jsfiddle.net/bjzpA/1/) –

감사합니다. 을 추가하면 문제가 해결되었지만 문제가 무엇인지, 그리고이 공간이 어떻게 고정되었는지 궁금합니다. – helloworld

마지막 항목의 아래쪽 테두리가 없습니다.

답변

관련 문제