javascript - 如何在html中形成拐 Angular 处 flex 的垂直线

Question

我只是附加了所需的输出图像。在大括号内，我需要一个 TextView ..

我尝试使用以下代码:

<div class="col-sm-12 col-md-8 offset-md-2  col-lg-6 offset-lg-3 nopadding">
    <div class="card weather" widget="">
        <div class="card-header">
            <span class="heading">Criminal Records</span>
            <div class="widget-controls">
                <button class="btn btn-info btn-rounded btn-xs" type="button" routerLink="/overview">
                    <i class="fa fa-arrow-left"></i> Back</button>
            </div>
        </div>
        <search-details [searchDetails]='details'></search-details>
        <div class="card  bottom-15">
            <div class="card-block text_yellow searchfont">{{data.length ? data.length : ''}} Possible Criminal
                <span *ngIf="data.length == 1">Record</span>
                <span *ngIf="data.length > 1">Records</span>
            </div>
            <div class="row">
                <span class="text-overflow">IMPORTANT: Due to varying quality of source data, records displayed may not pertain to your subject. Independent
                    verification is highly recommended. Criminal record results in FOREWARN may be limited due to strict
                    matching logic. Additional records may exist that fall outside FOREWARN's strict matching process.</span>&nbsp;&nbsp;&nbsp;
                <button class="btn btn-info btn-rounded btn-xs criminal-info-button" (click)="openCriminalImportantNote()" type="button">More</button>
            </div>
        </div>
        <div>
            <div class="card-block widget-body buttons">
                <div class="row" *ngFor="let record of data; let i = index">
                    <div class="col-sm-12 bottom-15">
                        <div class="card text_yellow">
                            <div class="card-block">
                                Record: {{i+1}}
                                <p class="propname">Source: {{ record.sourceName }}</p>
                                <div class="row">
                                    <div class="col-sm-9">
                                        <div *ngIf="record.offenseDate" class="row">
                                            <label class="col-5 col-sm-4 text-truncate text-gray">Offense Date: </label>
                                            <div class="col-7 col-sm-7">{{ record.offenseDate }}</div>
                                        </div>
                                        <div *ngIf="record.chargesFiledDate " class="row">
                                            <label class="col-5 col-sm-4 text-truncate text-gray">Charges Filed Date: </label>
                                            <div class="col-7 col-sm-7">{{ record.chargesFiledDate }}</div>
                                        </div>
                                        <div *ngIf="record.convictionDate" class="row">
                                            <label class="col-5 col-sm-4 text-truncate text-gray">Conviction Date: </label>
                                            <div class="col-7 col-sm-7">{{ record.convictionDate }}</div>
                                        </div>
                                        <div class="row">
                                            <label class="col-5 col-sm-4 text-truncate text-gray">Case Type: </label>
                                            <div class="col-7 col-sm-7">{{ record.caseType }}</div>
                                            <label class="col-5 col-sm-4 text-truncate text-gray">Description: </label>
                                            <div class="col-7 col-sm-7">{{ record.description }}</div>
                                            <label class="col-5 col-sm-4 text-truncate text-gray">Disposition: </label>
                                            <div class="col-7 col-sm-7">{{ record.disposition }}</div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <p>
                                            <b>
                                                <u>Match Key</u>
                                            </b>
                                        </p>
                                        <div class="row">
                                            <label class="col-9 col-sm-6">FirstName: </label>
                                            <div *ngIf="record.matchKeys && record.matchKeys.firstName" class="col-3 col-sm-6 color-green">&#10003;
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-9 col-sm-6">LastName: </label>
                                            <div *ngIf="record.matchKeys && record.matchKeys.lastName" class="col-3 col-sm-6 color-green">&#10003;
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-9 col-sm-6">MInitial: </label>
                                            <div *ngIf="record.matchKeys && record.matchKeys.mInitial" class="col-3 col-sm-6 color-green">&#10003;
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-9 col-sm-6">BirthDate: </label>
                                            <div *ngIf="record.matchKeys && record.matchKeys.dob" class="col-3 col-sm-6 color-green">&#10003;
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-9 col-sm-6">Address: </label>
                                            <div *ngIf="record.matchKeys && record.matchKeys.address" class="col-3 col-sm-6 color-green">&#10003;
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-9 col-sm-6">State: </label>
                                            <div *ngIf="record.matchKeys && record.matchKeys.state" class="col-3 col-sm-6 color-green">&#10003;
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我试图在 html 中添加在拐 Angular 处 flex 的垂直线，但我不知道如何在 html 中添加在拐 Angular 处 flex 的垂直线。谁能帮我解决这个问题。

请谁能帮我解决这个问题。

Answer 1

您可以使用borders和border-radius来实现您想要的，调整border-radius以满足您的需求，代码将是就像下面这样:

div {
  width: 70px;
  padding: 10px 15px;
  border-right: 1px solid #333;
  border-left: 1px solid #333;
  border-radius: 25px;
}

<div>
Some text Some text Some text Some text Some text
</div>