Question

我创建了.css类来创建不同颜色的圆圈。如果我在一个文件中使用css类，它按预期工作。但是，当我尝试在角度部分页面中使用它时，它无法正确呈现？

正确：不正确：

这是红色圆圈的css类

Get-Module -Name "*FirstPowershellModule*" | Remove-Module
$ii++
$destPath = "D:\Dev\FirstPowershellModule\FirstPowershellModule\bin\Debug\FirstPowershellModule" + $ii+ ".dll"
Copy-Item D:\Dev\FirstPowershellModule\FirstPowershellModule\bin\Debug\FirstPowershellModule.dll -Destination $destPath
$ass = [System.Reflection.Assembly]::LoadFile($destPath)
import-module -Assembly $ass

以下是在正确的html页面中使用它的方式

  .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>

Answer 1

只需添加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;
}

<强> DEMO HERE

部分页面无法正确呈现css类

1 个答案: