Question

如下面的代码片段所示，我有一个2x2的flex网格。我遇到的问题是，<p>元素的右上方和右下方的文本位于<p>的左侧，我希望将其推到右侧。我尝试摆弄justify-content: flex-end;，但就我而言似乎没有任何作用。

.stats-container {
    display: flex;
    flex-wrap: wrap;
}
.stats-container > p {
    flex-basis: 50%;
}

<div class="stats-container">
    <p>Likes</p>
    <p>Views</p>
    <p>Comments</p>
    <p>
        <a class='downloadImage' href="">
            <span class='specific-image-text'>Download</span>
        </a>
    </p>
</div>

Answer 1

您可以使用text-align:right并使用p:nth-child(even)选择合适的孩子：

.stats-container {
    display: flex;
    flex-wrap: wrap;
}
.stats-container > p {
    flex-basis: 50%;
}
.stats-container > p:nth-child(even){
   text-align:right;
 }

<div class="stats-container">
    <p>Likes</p>
    <p>Views</p>
    <p>Comments</p>
    <p>
        <a class='downloadImage' href="">
            <span class='specific-image-text'>Download</span>
        </a>
    </p>
</div>

如何将文本推送到flex <p>元素的右侧

1 个答案: