CSS 및 인쇄 : 이것은 일반적인 객관식 시험은 함께

Question

텍스트의 블록을 유지 질문 형식으로 가정합니다

<question qid='1'> 
<stem>What is your name?</stem> 
<choice value = 'a'>Arthur, King of the Britons</choice> 
<choice value = 'b'>There are some who call me ... Tim!</choice> 
<choice value = 'c'>He is brave Sir Robin, brave Sir Robin, who-- Shut up! Um, n-- n-- n-- nobody, really. I'm j-- j-- j-- ju-- just, um-- just passing through.</choice> 
<choice value = 'd'>Sir Galahad... the Chaste.</choice> 
<choice value = 'e'>Zoot... Just Zoot.</choice> 
</question> 

을하고 나는이 모든 웹 라디오 버튼으로 적합한 스타일에 매핑 있어요.

이제 인쇄 가능한 버전의 테스트를 만들어야합니다. 실제로 라디오를 포함 할 필요가 없다는 점에서 실제로는 더 간단합니다. 체크 표시에 '___'만 있으면됩니다. 가장 중요한 문제는 페이지 나누기에서 질문을 분리하는 방법입니다.

Answer 1

저는 이런 식으로 일관되게 방지하지 못했습니다. 조금 더러울 수도 있지만 질문이 보통 같은 길이라면 X 질문마다 페이지 나누기를 강요 할 수 있습니까?

<style type="text/css"> 
.pageBreak{ 
    page-break-before: always; 
} 
</style> 

<question>...</question><br class="pageBreak" /> 
<question>...</question> 

(또는 당신이 원하는 무엇이든 질문하거나 클래스를 적용)

당신은 페이지 나누기 - 내부 속성을 사용하여 시도 할 수 있습니다,하지만 난 그것에 대한 브라우저 지원으로 일관성을 보지 못했다

question { 
    page-break-inside:avoid; 
} 

Answer 2

CSS에서 page-break-after, page-break-inside 및 page-break-before 규칙을 살펴 보시기 바랍니다.

Answer 3

별도의 인쇄 스타일 시트를 사용하여 각 페이지에 page-break-before 및 page-break-after 당신의 선도에 대한 선택기 및 종료 질문을 사용 : 지금 엉망이다.

퀴즈가 정적 인 경우 사용하는 클래스를 플롯하고 CSS 이상을 사용하지 않고 사용할 수 있습니다.

Answer 4

테이블 레이아웃을 사용하십시오. 그러나 의미를 변경하지 않으려면 CSS를 사용하십시오.

question { 
    display: inline-table; 
}