我有一个css网格.我想使用nth-child、odd和even Select 器来使项在网格的每个垂直边缘上推-它应该如下所示:
.questionsAndAnswers {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 24px;
font-size: 12px;
font-family: "sans-serif";
justify-items: end;
border: 1px solid red;
}
.questionsAndAnswers:nth-child(odd){
justify-items: start;
}<div class="questionsAndAnswers">
<p>
one
</p>
<p>
two
</p>
<p>
three
</p>
<p>
four
</p>
</div>您可以在子<p>元素上使用nth-child伪 Select 器，并使用justify-self而不是justify-items.
.questionsAndAnswers {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 24px;
font-size: 12px;
font-family: "sans-serif";
border: 1px solid red;
}
.questionsAndAnswers p:nth-of-type(even){
justify-self: end;
}
.questionsAndAnswers p:nth-of-type(odd){
justify-self: start;
}<div class="questionsAndAnswers">
<p>
one
</p>
<p>
two
</p>
<p>
three
</p>
<p>
four
</p>
</div>