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

Question

我很难在 Angular 中创建这个盒子，有人可以帮我吗？ https://i.stack.imgur.com/snVfv.png

标签： htmlcssangularangular-material

Answer 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
}