如何解决角度-html-字体真棒图标在div的右侧未对齐
我有一个div列表,每个列表都有一个图标,一些文本和另一个图标(一个圆圈),这些图标必须在右侧。为了实现此目的,我设置了margin-left
属性,但是当然,边距是根据文本长度而不是父div位置计算的。 因此它导致右侧的圆圈未对齐。 我使用了 font awesome 图标包。
图像中显示的内容是通过循环获得的,该循环为每次迭代生成一个<app-item-icon>
分量
<app-item-icon>
<i icon class="fas fa-2x fa-clipboard-list"></i>
<span class="span-list-item">{{ item.name }}</span>
<i class="fas fa-circle" [ngClass]="{'is-active': item.is_active,'is-not-active': !item.is_active}" ></i>
</app-item-icon>
由于<i>
属性,第二个ngClass
标签具有以下两个css类之一。恕我直言,这就是我的问题所在
.is-active {
color: green;
margin-left: 90vw !important;
}
.is-not-active {
color: red;
margin-left: 90vw !important;
}
这是<app-item-icon>
的html文件:
<div class="container">
<ng-content select="[icon]" ></ng-content>
<ng-content></ng-content>
</div>
我正在使用 Angular 框架和 content-projection 。 <ng-content>
指令将在呈现的模板上替换为<div>
容器。第一个ng-content
捕获左侧的第一个图标,而第二个ng-content
捕获导致mi问题的文本和圆圈图标。
这是<app-item-icon>
的CSS
.container {
display: flex;
align-items: center;
padding: 0;
}
:host ::ng-deep *{
float: left;
}
:host ::ng-deep i {
padding: 3px 1px;
margin-right: 6px !important;
}
:host ::ng-deep :not(i) {
margin-left: 2px;
margin-top: 2px;
margin-bottom: 2px;
}
我尝试过的很远:
-
float: right
上的圆圈图标:完全没有效果; -
position: absolute
:实际上是可行的,但是出乎意料的是,这些图标在垂直方向上没有居中,而是稍微向上移动; -
text-align: end
对容器类:无效; - 在圆圈上设置
margin-right
而不是左边的数字:没有效果,因为我认为他们的右边没有任何元素;
关于角度::我不知道为什么,但是使用浏览器检查工具,我注意到圆圈图标设置了::before
伪元素。我认为这是由于Angular内容投影。找出解决方案可能会有所帮助
解决方法
我看到您的班级.container有display: flex
。如果通过添加[icon]在第一个<ng-content>
中包括跨度,则可以这样更改.container类:
.container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
}
justify-content: space-between;
会在一侧显示每个<ng-content>
,而文本长度无关紧要。
通常,您在margin-left: 90vw !important;
类中不再需要.is-active .is-not-active
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。