为什么这个用于考试的html / css代码没有在问题之间增加空格？

我正在使用html和css编写考试，我为这些问题创建了一个<div>类，旨在为学生提供编写答案的空间。

然而，代码不起作用，我不知道问题出在哪里。下面是非工作代码的例子。

请帮助我理解为什么这没有按预期工作。

<html>
  <head>
    <style type="text/css">
       body, pre {
                  font-family: serif;
                  margin-left: 12%;
                  margin-right: 12%;
                  text-align: justify;
                  font-size: 110%;
                 {
       .shortAnsw {
                   padding-bottom: 5cm;
                  }
       .longAnsw  {
                   padding-bottom: 10cm;
                  }
       .answer    {
                   display: none;
                  }
  </style>
</head>
<body>
  <h1>Exam 1</h1>
   <p>
    <strong> Please write your name only on the back of the last page of the exam. </strong> 
   </p>
  <h2>Short Answer</h2>
   <p>
    Please answer the following questions in no more than 3 sentences. 
   </p>
     <ol>
       <li>
         <div class="longAnsw">
           question 1
         </div>
       </li>
       <li>
         <div class="shortAnsw">
           question 2
         </div>
       </li>
       <li>
         <div class="shortAnsw">
          question 3
         </div>
       </li>
      </ol>
   </body>
</html>

您有一个向后的{。

   body, pre {
              font-family: serif;
              margin-left: 12%;
              margin-right: 12%;
              text-align: justify;
              font-size: 110%;
             {

分区是容器，而不是文本框。如果你想让用户输入文本，你必须使用表单标记。

http://www.w3schools.com/html/html_forms.asp

这是一个表单的简短教程。

相关内容

最新更新

热门标签：