样式未正确应用于<ul>标记
我已经在Angular 7应用程序的表中实现了输入控件和按钮。当用户在输入控件中输入文本并单击添加按钮时，该文本将输入到<ul>列表中。目前<ul>列表已全部变形，我相信是因为它的容器。我所指的示例使用的是<div>。有人可以帮助我，让我知道问题出在哪里吗
以下是我所指的链接，并试图使其看起来像示例中的链接
https://stackblitz.com/angular/kelqedbdqlb?file=src%2Fapp%2Fheroes%2Fheroes.component.css
这是我在屏幕上的样子
HTML
<table style="width:100%" *ngIf="ManagerStrategyDetails">
<tr>
<td>
<table style="width:100%">
<tr *ngIf="!UserProfile.CanCreateProspectiveManagerStrategy">
<td class="tableItem header">Firm Name<span
style="color:red; padding-left:5px">*</span></td>
<td class="tableItem">
<span *ngIf="!EditMode">{{ManagerStrategyDetails.FirmName}}</span>
<ng-select *ngIf="EditMode" [items]="Firms" [virtualScroll]="true"
[loading]="loading" bindLabel="Name" style="width:450px;height:27px;" bindValue="Id"
appendTo="body" (scroll)="onFirmsScroll($event)" placeholder="Select Firm"
(change)="onExistingStrategyChange($event)"
(scrollToEnd)="onFirmsScrollToEnd()">
</ng-select>
</td>
</tr>
<tr *ngIf="!UserProfile.CanCreateProspectiveManagerStrategy">
<td class="tableItem header">Manager Name<span
style="color:red; padding-left:5px">*</span></td>
<td class="tableItem">
<span *ngIf="!EditMode">{{ManagerStrategyDetails.ManagerName}}</span>
<div *ngIf="EditMode">
<input class="etg-text-box" style="width: 450px; float: left;" #heroName />
<button (click)="add(heroName.value); heroName.value=''">
Add
</button>
</div>
<ul class="heroes">
<li *ngFor="let hero of heroes">
<a >
<span class="badge"></span> {{hero.name}}
</a>
<button class="delete" title="delete hero"
(click)="delete(hero)">x</button>
</li>
</ul>
</td>
</tr>
<tr>
<td class="tableItem header">Fund Strategy Name<span
style="color:red; padding-left:5px"
*ngIf="NewStrategyMode || EditMode">*</span></td>
<td class="tableItem">
<span *ngIf="!EditMode">{{ManagerStrategyDetails.FundStrategyName}}</span>
<input *ngIf="EditMode" class="etg-text-box" style="width: 450px" type="text"
name="fsname" [(ngModel)]="ManagerStrategyDetails.FundStrategyName">
</td>
</tr>
<tr>
<td class="tableItem header">Investment Status<span
style="color:red; padding-left:5px"
*ngIf="NewStrategyMode || EditMode">*</span></td>
<td *ngIf="!EditMode" class="tableItem">{{ManagerStrategyDetails.InvestmentStatus != null ? ManagerStrategyDetails.InvestmentStatus.Name:
''}}</td>
<td *ngIf="EditMode" class="tableItem">
<kendo-combobox style="width:450px"
[disabled]="!UserProfile.CanCreateProspectiveManagerStrategy"
[(ngModel)]="DefaultInvestmentStatus"
[data]="ManagerStrategyDetails.InvestmentStatuses" [filterable]="true"
[kendoDropDownFilter]="filterSettings" textField="Name" valueField="Id">
</kendo-combobox>
</td>
</tr>
<tr *ngIf="!UserProfile.CanCreateProspectiveManagerStrategy">
<td class="tableItem header">Underlying Fund Name<span
style="color:red; padding-left:5px">*</span></td>
<td class="tableItem">
<span *ngIf="!EditMode">{{ManagerStrategyDetails.FundStrategyName}}</span>
<input *ngIf="EditMode" class="etg-text-box" style="width: 450px" type="text"
name="fsname" [(ngModel)]="ManagerStrategyDetails.FundStrategyName">
</td>
</tr>
<tr>
<td class="tableItem header">Strategy Type<span style="color:red; padding-left:5px"
*ngIf="NewStrategyMode || EditMode">*</span></td>
<td *ngIf="!EditMode" class="tableItem">{{ManagerStrategyDetails.FundStrategyType != null ? ManagerStrategyDetails.FundStrategyType.Name:
''}}</td>
<td *ngIf="EditMode" class="tableItem">
<kendo-combobox style="width:450px"
[(ngModel)]="ManagerStrategyDetails.FundStrategyType"
[data]="ManagerStrategyDetails.FundStrategyTypes" [filterable]="true"
[kendoDropDownFilter]="filterSettings" textField="Name" valueField="Id">
</kendo-combobox>
</td>
</tr>
<tr>
<td class="tableItem header">Strategy<span style="color:red; padding-left:5px"
*ngIf="NewStrategyMode || EditMode">*</span></td>
<td *ngIf="!EditMode" class="tableItem">
{{ManagerStrategyDetails.Strategy != null ? ManagerStrategyDetails.Strategy.Name: ''}}
</td>
<td *ngIf="EditMode" class="tableItem">
<kendo-combobox style="width:450px"
[(ngModel)]="ManagerStrategyDetails.Strategy"
[data]="ManagerStrategyDetails.Strategies" [filterable]="true"
[kendoDropDownFilter]="filterSettings" textField="Name" valueField="Id">
</kendo-combobox>
</td>
</tr>
<tr *ngIf="UserProfile.CanCreateProspectiveManagerStrategy">
<td class="tableItem header">Reporting Strategy<span
style="color:red; padding-left:5px"
*ngIf="NewStrategyMode || EditMode">*</span></td>
<td *ngIf="!EditMode" class="tableItem">{{ManagerStrategyDetails.ReportingStrategy != null ? ManagerStrategyDetails.ReportingStrategy.Name:
''}}</td>
<td *ngIf="EditMode" class="tableItem">
<kendo-combobox style="width:450px"
[(ngModel)]="ManagerStrategyDetails.ReportingStrategy"
[data]="ManagerStrategyDetails.ReportingStrategies" [filterable]="true"
[kendoDropDownFilter]="filterSettings" textField="Name" valueField="Id">
</kendo-combobox>
</td>
</tr>
<tr *ngIf="!ManagerStrategyDetails.IsNew">
<td class="tableItem header">Primary Fund</td>
<td *ngIf="!EditMode" class="tableItem">
{{ManagerStrategyDetails.PrimaryFund != null ? ManagerStrategyDetails.PrimaryFund.Name: ''}}
</td>
<td *ngIf="EditMode" class="tableItem">
<kendo-combobox style="width:450px"
[(ngModel)]="ManagerStrategyDetails.PrimaryFund"
[data]="ManagerStrategyDetails.Funds" [filterable]="true"
[kendoDropDownFilter]="filterSettings" textField="Name" valueField="Id">
</kendo-combobox>
</td>
</tr>
<tr *ngIf="ManagerStrategyDetails.IsCoinvestment && !ManagerStrategyDetails.IsNew">
<td class="tableItem header">Representative Product</td>
<td *ngIf="!EditMode" class="tableItem">
{{ManagerStrategyDetails.RepresentativeProduct != null ? ManagerStrategyDetails.RepresentativeProduct.Name: ''}}
</td>
<td *ngIf="EditMode" class="tableItem">
<kendo-combobox style="width:450px"
[(ngModel)]="ManagerStrategyDetails.RepresentativeProduct"
[data]="ManagerStrategyDetails.RepresentativeProducts" [filterable]="true"
[kendoDropDownFilter]="filterSettings" textField="Name" valueField="Id">
</kendo-combobox>
</td>
</tr>
<tr>
<td class="tableItem header">Primary Analyst</td>
<td *ngIf="!EditMode" class="tableItem">
{{ManagerStrategyDetails.PrimaryAnalyst != null ? ManagerStrategyDetails.PrimaryAnalyst.Name: ''}}
</td>
<td *ngIf="EditMode" class="tableItem">
<kendo-combobox style="width:450px"
[(ngModel)]="ManagerStrategyDetails.PrimaryAnalyst"
[data]="ManagerStrategyDetails.Analysts" [filterable]="true"
[kendoDropDownFilter]="filterSettings" textField="Name" valueField="Id">
</kendo-combobox>
</td>
</tr>
<tr>
<td class="tableItem header">Secondary Analyst</td>
<td *ngIf="!EditMode" class="tableItem">
{{ManagerStrategyDetails.SecondaryAnalyst != null ? ManagerStrategyDetails.SecondaryAnalyst.Name: ''}}
</td>
<td *ngIf="EditMode" class="tableItem">
<kendo-combobox style="width:450px"
[(ngModel)]="ManagerStrategyDetails.SecondaryAnalyst"
[data]="ManagerStrategyDetails.Analysts" [filterable]="true"
[kendoDropDownFilter]="filterSettings" textField="Name" valueField="Id">
</kendo-combobox>
</td>
</tr>
<tr>
<td class="tableLastItem header">Benchmark 1</td>
<td *ngIf="!EditMode" class="tableItem">
{{ManagerStrategyDetails.Benchmark1 != null ? ManagerStrategyDetails.Benchmark1.Name: ''}}
</td>
<td *ngIf="EditMode" class="tableLastItem">
<kendo-combobox style="width:450px"
[(ngModel)]="ManagerStrategyDetails.Benchmark1"
[kendoDropDownFilter]="filterSettings"
[data]="ManagerStrategyDetails.Benchmarks" [filterable]="true"
[kendoDropDownFilter]="filterSettings" textField="Name" valueField="Id">
</kendo-combobox>
</td>
</tr>
<tr>
<td class="tableLastItem header">Benchmark 2 (HF)</td>
<td *ngIf="!EditMode" class="tableItem">
{{ManagerStrategyDetails.Benchmark2 != null ? ManagerStrategyDetails.Benchmark2.Name: ''}}
</td>
<td *ngIf="EditMode" class="tableLastItem">
<kendo-combobox style="width:450px"
[(ngModel)]="ManagerStrategyDetails.Benchmark2"
[kendoDropDownFilter]="filterSettings"
[data]="ManagerStrategyDetails.HFBenchmarks" [filterable]="true"
[kendoDropDownFilter]="filterSettings" textField="Name" valueField="Id">
</kendo-combobox>
</td>
</tr>
<tr>
<td class="tableLastItem header">Benchmark 3</td>
<td *ngIf="!EditMode" class="tableItem">
{{ManagerStrategyDetails.Benchmark3 != null ? ManagerStrategyDetails.Benchmark3.Name: ''}}
</td>
<td *ngIf="EditMode" class="tableLastItem">
<kendo-combobox style="width:450px"
[(ngModel)]="ManagerStrategyDetails.Benchmark3"
[kendoDropDownFilter]="filterSettings"
[data]="ManagerStrategyDetails.Benchmarks" [filterable]="true"
[kendoDropDownFilter]="filterSettings" textField="Name" valueField="Id">
</kendo-combobox>
</td>
</tr>
<tr>
<td class="tableLastItem header">Peer Group 1</td>
<td *ngIf="!EditMode" class="tableItem">
{{ManagerStrategyDetails.PeerGroup1 != null ? ManagerStrategyDetails.PeerGroup1.Name: ''}}
</td>
<td *ngIf="EditMode" class="tableLastItem">
<kendo-combobox style="width:450px"
[(ngModel)]="ManagerStrategyDetails.PeerGroup1"
[kendoDropDownFilter]="filterSettings"
[data]="ManagerStrategyDetails.PeerGroups1" [filterable]="true"
[kendoDropDownFilter]="filterSettings" textField="Name" valueField="Id">
</kendo-combobox>
</td>
</tr>
<tr>
<td class="tableLastItem header">Peer Group 2</td>
<td *ngIf="!EditMode" class="tableItem">
{{ManagerStrategyDetails.PeerGroup2 != null ? ManagerStrategyDetails.PeerGroup2.Name: ''}}
</td>
<td *ngIf="EditMode" class="tableLastItem">
<kendo-combobox style="width:450px"
[(ngModel)]="ManagerStrategyDetails.PeerGroup2"
[kendoDropDownFilter]="filterSettings"
[data]="ManagerStrategyDetails.PeerGroups2" [filterable]="true"
[kendoDropDownFilter]="filterSettings" textField="Name" valueField="Id">
</kendo-combobox>
</td>
</tr>
<tr *ngIf="!UserProfile.CanCreateProspectiveManagerStrategy">
<td class="tableItem header">Contact Person<span
style="color:red; padding-left:5px">*</span></td>
<td class="tableItem">
<span *ngIf="!EditMode">{{ManagerStrategyDetails.FundStrategyName}}</span>
<input *ngIf="EditMode" class="etg-text-box" style="width: 450px" type="text"
name="fsname" [(ngModel)]="ManagerStrategyDetails.FundStrategyName">
</td>
</tr>
<tr *ngIf="!UserProfile.CanCreateProspectiveManagerStrategy">
<td class="tableItem header">Address<span
style="color:red; padding-left:5px">*</span></td>
<td class="tableItem">
<span *ngIf="!EditMode">{{ManagerStrategyDetails.FundStrategyName}}</span>
<input *ngIf="EditMode" class="etg-text-box" style="width: 450px" type="text"
name="fsname" [(ngModel)]="ManagerStrategyDetails.FundStrategyName">
</td>
</tr>
<!-- <tr>
<td class="tableLastItem header">Make Anonymous</td>
<td *ngIf="!EditMode" class="tableLastItem">
{{ManagerStrategyDetails.IsAnonymus ? "Yes" : "No"}}
</td>
<td *ngIf="EditMode" class="tableLastItem">
<input type="checkbox" id="cbIsAnonymus" class="epg-checkbox"
[(ngModel)]="ManagerStrategyDetails.IsAnonymus">
</td>
</tr>
<tr>
<td class="tableLastItem header">Restrict From Liquid Alts Team</td>
<td *ngIf="!EditMode" class="tableLastItem">
{{ManagerStrategyDetails.IsRestrictFromLiquidAltsTeam ? "Yes" : "No"}}
</td>
<td *ngIf="EditMode" class="tableLastItem">
<input type="checkbox" id="cbIsRestrictFromLiquidAltsTeam" class="epg-checkbox"
[(ngModel)]="ManagerStrategyDetails.IsRestrictFromLiquidAltsTeam">
</td>
</tr> -->
</table>
</td>
<td style="width: 60%;">
<div class="desc-header">Fund Strategy Description
<span class="pull-right"
style="font-style: italic; font-size: 12px">{{ManagerStrategyDetails.DescLastReviewer}}</span>
</div>
<div style="font-size: 12px; border: solid 1px lightgrey; height: 448px;overflow: scroll;">
<ckeditor [id]="'ckeditor_strategy_desc'" style="font-size: 11px;" *ngIf="EditMode"
debounce="500" [config]="EditorConfig"
[(ngModel)]="ManagerStrategyDetails.FundStrategyDescription"> </ckeditor>
<div style="padding: 25px" *ngIf="!EditMode"
[innerHTML]="ManagerStrategyDetails.FundStrategyDescription"></div>
</div>
</td>
</tr>
</table>
css
/* HeroesComponent's private CSS styles */
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
position: relative;
cursor: pointer;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes a {
color: #333;
text-decoration: none;
position: relative;
display: block;
width: 250px;
}
.heroes a:hover {
color:#607D8B;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color:#405061;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
min-width: 16px;
text-align: right;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
button {
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
font-family: Arial;
}
button:hover {
background-color: #cfd8dc;
}
button.delete {
position: relative;
left: 194px;
top: -32px;
background-color: gray !important;
color: white;
}
更新1
3 个答案:
答案 0 :(得分：0)
这是CSS的最新版本
/ * HeroesComponent的私有CSS样式* /
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
position: relative;
cursor: pointer;
background-color: #EEE;
margin: .5em;
height: 36px;
border-radius: 4px;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes a {
color: #333;
text-decoration: none;
position: relative;
display: inline-block;
}
.heroes a:hover {
color:#607D8B;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
background-color: #405061;
line-height: 1em;
position: relative;
border-radius: 4px 0 0 4px;
margin-right: 6px;
height: 36px;
margin: auto 4px auto auto;
min-width: 30px;
text-align: center;
line-height: 36px;
}
button {
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
font-family: Arial;
}
button:hover {
background-color: #cfd8dc;
}
button.delete {
position: absolute;
right: 4px;
top: 0;
background-color: gray !important;
color: white;
bottom: 0;
margin: auto;
height: 82%;
}
/ * 版权所有Google LLC。版权所有。 此源代码的使用受MIT样式的许可证约束，该许可证 可以在http://angular.io/license的LICENSE文件中找到 * /
答案 1 :(得分：0)
进行以下更改
在HTML中，对列表内的标记进行如下更改：
<a >
<div style="display: flex;">
<span class="badge"></span>
<span>{{hero.name}}</span>
</div>
</a>
在CSS中对.heroes标签进行如下更改：
.heroes a {
color: #333;
text-decoration: none;
position: relative;
display: flex;
line-height: 35px;
}
作为参考，请检查此codepen链接https://codepen.io/anon/pen/EqvOqx?editors=1100
答案 2 :(得分：0)
对于Verticle Middle
Binding
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？