2017-07-26 106 views
1

我有一段html/css代碼,我在我的角度應用程序中使用了我想返工的內容,所以我可以將文本添加到實心邊框中。邊界內的文本

.colorstripGreen{ 
 
    padding: 0px; 
 
    width: 100%; height: 100%; 
 
    border-left: solid; 
 
    border-width: 15px; 
 
    border-color: #228b22; 
 
}
<div *ngIf="level == '4'"> 
 
    <div class="w3-col" style="width: 14%; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 1%;"> 
 
    <div (click)="populateDropDowns(); getChangeLog(); getRequestLog(); myModal.open();"> 
 
     <div class="card white"> 
 
     <div class="card-content grey-text"> 
 
      <div class="colorstripGreen"> 
 
      <p>{{surgAM}}<br>{{deptAM}}</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="card white"> 
 
     <div class="card-content grey-text"> 
 
      <div class="colorstripGreen"> 
 
      <p>{{surgPM}}<br>{{deptPM}}</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

在我的應用程序這說明如下:

enter image description here

我希望能夠做的是編輯CSS和HTML,包括裏面的一些堅實的綠色盒子。我怎樣才能做到這一點?

感謝

回答

2

下面的CSS和HTML做的,我相信你說的話https://jsfiddle.net/h3aenLkh/

<div *ngIf="level == '4'"> 
    <div class="w3-col" style="width: 14%; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 1%;"> 
    <div (click)="populateDropDowns(); getChangeLog(); getRequestLog(); myModal.open();"> 
     <div class="card white"> 
     <div class="card-content grey-text"> 
      <div class="colorstripGreen"> 
      <p><span>1</span>{{surgAM}}<br>{{deptAM}}</p> 
      </div> 
     </div> 
     </div> 
     <div class="card white"> 
     <div class="card-content grey-text"> 
      <div class="colorstripGreen"> 
      <p><span>1</span>{{surgPM}}<br>{{deptPM}}</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

和CSS

.colorstripGreen{ 
    padding: 0px; 
    width: 100%; height: 100%; 
    border-left: solid; 
    border-width: 15px; 
    border-color: #228b22; 
} 

.colorstripGreen span{position:relative;left:-15px;bottom:-100%} 
+0

完美!非常感謝! – Sisky