Question

我创建了一个网站，人们可以来这里创建自己的测验问题。之后，他们将能够看到这些问题。

＆＃13;

html,
body,
div {
  margin: 0;
  padding: 0;
  font-size: 1.2vw;
  font-family: Arial, sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover,
li:hover {
  background-color: black;
  color: white;
}

.action {
  display: inline-block;
  font: inherit;
  font-size: 1.8vw;
  padding: 0.5% 2% 0.5% 2%;
  background-color: #ffffff;
  text-align: center;
  border-color: black;
  border-style: solid solid solid solid;
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  border-width: 0.15em;
  margin: 2% 2% 0% 2%;
}

#content_question {
  text-align: center;
  position: fixed;
  display: block;
  left: 16%;
  right: 34%;
  width: 48%;
  top: 15%;
  bottom: 5%;
}

.question_fields {
  display: inline-block;
  padding: 2% 4% 2% 4%;
  font: inherit;
  color: white;
  text-align: center;
  background-color: black;
  border-color: black;
  border-style: solid solid solid solid;
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  border-width: 0.15em;
  font-size: 1.8vw;
  resize: none;
  outline: none;
}

#question {
  width: 90.5%;
  height: 21.2%;
}

.question_fields.answers {
  display: inline;
  width: 40.3%;
  margin-top: 0.5%;
  font-size: 1.5vw;
  background-color: #ea5400;
  color: black;
}

#right_answer {
  background-color: #008000;
}

#source {
  background-color: white;
  width: 90.5%;
}

#create_question {
  display: block;
  margin: 1.5% auto 0% auto;
}

#create_question:hover {
  background-color: black;
  color: white;
}

.show_question_fields {
  display: inline-block;
  font: inherit;
  text-align: center;
  border-color: black;
  border-style: solid solid solid solid;
  border-radius: 0.4em 0.4em 0.4em 0.4em;
  border-width: 0.15em;
  font-size: 1.8vw;
}

#show_question {
  color: white;
  background-color: black;
  width: 98.5%;
  height: 26.2%;
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  margin-bottom: 0.3%;
}

.show_question_fields.answers {
  color: black;
  background-color: #ea5400;
  width: 47.8%;
  height: 22.3%;
  margin-top: 0.5%;
  margin-bottom: 0.35%;
  margin-right: 0.35%;
  margin-left: 0.4%;
}

.show_question_fields.source {
  color: black;
  background-color: white;
  width: 98.5%;
  height: 13.6%;
  margin-top: 0.5%;
  margin-bottom: 0.4%;
}

#show_right_answer {
  background-color: #008000;
}

＆＃13;

HTML looks like that:


<div id="content_question">

  <div id="show_question" class="show_question_fields">
    <p>
      Question
    </p>
  </div>

  <div id="show_right_answer" class="show_question_fields answers">
    <p>
      Right Answer</br>
      Right Answer Part 2
    </p>
  </div>

  <div class="show_question_fields answers">
    <p>
      Answer 2
    </p>
  </div>

  <div class="show_question_fields answers">
    <p>
      Answer 3
    </p>
  </div>

  <div class="show_question_fields answers">
    <p>
      Answer 4
    </p>
  </div>

  <div class="show_question_fields source">
    <p>
      Source
    </p>
  </div>

  <a href="#" class="action">To Main Page</a>
  <a href="#" class="action">Back</a>

</div>

＆＃13;

正如您所看到的，当答案由两行或更多行组成时，答案字段下的margin-bottom更大。情况应该不是这样。

有人可以帮我解决这个问题吗？我已经尝试过更改边距，行高和填充，但它没有帮助。

Answer 1

只需将vertical-align：top添加到＆＃34; show_question_fields＆＃34;类：

function createNamedRangeUrl(name) {
  var root = SpreadsheetApp.getActiveSpreadsheet(); 
  var range = root.getRangeByName(name); 
  var sheetId = range.getSheet().getSheetId(); 
  var rangeCode = range.getA1Notation(); 
  return ("https://docs.google.com/spreadsheets/d/" + 
  root.getId() + "/edit#gid=" + sheetId + "&range=" + rangeCode); 
}

当段落超过一行

1 个答案: