在下一行旁边对齐

Question

我们如何在 css 中设置文本应该在下一行

输出应该是这样的 enter image description here

#当前输出

Financing Contigency Site Plan Approval Contigency

#目标

Financing Contigency 
Site Plan Approval Contigency

#代码

 <div class="buyer-details-info-field" style="padding-top: 15px;">
            <div class="opacity54">Contingencies</div>
            <span *ngIf="dealData.dealTypeValues.isFinancingContingency" style="font-size:12px;margin-left: 8px;" class="value">Financing Contigency</span>
            <span *ngIf="dealData.dealTypeValues.isSitePlanApprovalContingency" style="font-size:12px;margin-left: 8px;" class="value">Site Plan Approval Contigency</span>
          </div>

Answer 1

您应该在 CSS 中使用 display: block 值。在这里，我将它们应用于所有 <span>，但您可以将其添加到 value css 的 class.

此外，在这个例子中，我删除了 *ngIf 以使其更清楚。

.buyer-details-info-field {
   display: flex;
   height: 28px;
   margin-left: 16px;
   align-items: center;
}

span {
   display: block;
}

<div class="buyer-details-info-field" style="padding-top: 15px; display: block;">
   <div class="opacity54">Contingencies</div>
   <span style="font-size:12px;margin-left: 8px;" class="value">Financing Contigency</span>
   <span style="font-size:12px;margin-left: 8px;" class="value">Site Plan Approval Contigency</span>
</div>

你也可以只用<br>，用display: contents，比如你想把它们放在右边，用float:right就可以了:

.buyer-details-info-field {
   display: flex;
   height: 28px;
   margin-left: 16px;
   align-items: center;
}

.value {
   float: right;
}

.opacity54 {
   float: left;
}

<div class="buyer-details-info-field" style="padding-top: 15px; display: contents;">
   <div class="opacity54">Contingencies</div>
   <span style="font-size:12px;margin-left: 8px;" class="value">Financing Contigency</span><br>
   <span style="font-size:12px;margin-left: 8px;" class="value">Site Plan Approval Contigency</span>
</div>

在下一行旁边对齐

align next to next line

css

angular-material