0
私は自分のクイズの質問を作成してサイトを作成することができます。その後、これらの質問を見ることができます。段落が1行以上の場合のマージンが大きい
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;
}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>あなたが見ることができるように、解答欄の下マージン下には答えが2行以上で構成されている場合、大きいです。そうではないはずです。
誰でも私がこの問題を解決するのに手伝ってもらえますか？私はすでにマージン、行の高さ、パディングを変更しようとしましたが、それは役に立たないでしょう。あなたの「show_question_fields」クラスに、トップ：：
をあなたが満たすために順序どおり、JavaScriptを使用する必要があります！ – Smit
'' p {margin：0} 'と[this]（http://stackoverflow.com/questions/42098246/center-text-vertical-in-element-that-changes-height-and-width/42098684#はどうですか？ 42098684）？ –
あなたのCSSの 'display：inline-block;'それを変更したときに 'display：inherit or initial;'を参照してください。 – Toxide82