如何在 Angular 中创建一个带有不同颜色的左右段落的框？

【问题标题】：How can I create a box in Angular with paragraph on left and right with different color?如何在 Angular 中创建一个带有不同颜色的左右段落的框？
【发布时间】：2021-10-22 22:01:16
【问题描述】：

I have hard time creating this box in Angular, can someone please help me?https://i.stack.imgur.com/snVfv.png

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

是否可以用普通的 div 替换段落。这将是一个简单的修复。

只需将此 HTML 和 CSS 添加到组件的 HTML 和 CSS 文件中即可。

我还为你创建了一个 jsFiddle 链接。

网址 - https://jsfiddle.net/Amir_Khan064/m5exo1jc/8/

HTML -

<div class="primary-nav">
    <div class="left">Lef aligned div </div>
    <div> right aligned child </div>
</div>

CSS -

.primary-nav {
    display:-webkit-flex;
    display:flex;
    list-style-type:none;
    padding:0;
    justify-content:flex-end;
    color: red;
    font-weight: 700
}

.left {
    margin-right:auto;
    color: green;
    font-weight: 700
}

【讨论】：