我创建了 .css 类来创建不同颜色的圆圈。如果我在一个文件中使用 css 类，它会按预期工作。但是，当我尝试在 Angular 部分页面中使用它时，它无法正确呈现？
正确:
不正确:
这是红色圆圈的CSS类
.red-circle {
margin: 40px auto 0;
width: 30px;
height: 30px;
border-radius: 100%;
border: 1px solid #c92c09;
}.red-circle:before, .red-circle:after {
content: '';
width: 15px;
height: 30px;
}.red-circle:before {
float: left;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
background: #c92c09;
}.red-circle:after {
float: right;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background: #c92c09;
}
下面是它在正确的 html 页面中的使用方式
<link rel="stylesheet" href="../css/circles.css" type="text/css" />
<body>
<div class="red-circle"><div>
</body>
这是显示不正确的 html
<div class="container" ng-controller="FieldCtrl">
<link rel="stylesheet" href="../css/circles.css" type="text/css" />
<div class="red-circle"> </div>
</div>
最佳答案
只需添加 position 和 top 并删除 floats，而是使用 right 和 left
CSS
.red-circle {
margin: 40px auto 0;
width: 30px;
height: 30px;
border-radius: 100%;
border: 1px solid #c92c09;
position: relative;
}
.red-circle:before,
.red-circle:after {
top: 0;
position: absolute;
content: '';
width: 15px;
height: 30px;
}
.red-circle:before {
left: 0;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
background: #c92c09;
}
.red-circle:after {
right: 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background: #c92c09;
}
.container {
display: inline-block;
}
关于css - 部分页面未正确呈现 css 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37282022/