我在UI上遇到一些问题。获取不需要的左侧菜单的滚动条。有什么办法可以解决问题。请查看随附的屏幕截图（以红色高亮显示）。另请参阅左侧菜单的代码。
<nav class="sidebar" [ngClass]="{sidebarPushRight: isActive}" style="width:16.67%">
<div id="sidebar-wrapper">
<ul class="sidebar-nav list-group" style="margin-left:0; width:100%; right:0px;">
<li>
<div style="height: auto; border-bottom: 1px; border-bottom-style: solid; border-radius: 0; border-bottom-color: #77c157;">
<h4 class="headingTables" style="color:#ffffff!important; vertical-align:middle; padding:20px; text-align:left;text-justify:inter-word;">Hello {{firstName}} {{lastName}}!</h4>
</div>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"dashboard")'>
<a [routerLink]="['/dashboard']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0; color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/DashboardIcon.png">
Dashboard
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"properties")'>
<a [routerLink]="['/projects']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0; color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/ProjectsIcon.png">
Properties
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"historicPayments")'>
<a [routerLink]="['/historicPayments']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0; color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/PaymentsIcon.png">
Payment History
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"futurePayments")'>
<!--*ngIf='permissions && permissions.length && checkPermission(permissions,"futurePayments")'>-->
<a [routerLink]="['/futurePayments']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0;color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/PaymentsIcon.png">
Next Payment Date
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"profile")'>
<a [routerLink]="['/profile']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0;color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/ProfileIcon.png">
Profile
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"requests")'>
<a [routerLink]="['/serviceRequestsList']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0;color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/ServiceRequestsIcon.png">
Service Requests
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"faqs")'>
<a [routerLink]="['/faqs']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0;color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/FAQsIcon.png">
FAQ's
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"admin")'>
<a [routerLink]="['/searchproperties']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0;color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/admin.png">
Admin Home
</span>
</div>
</a>
</li>
<li style="height: 60px; position: relative;padding: .75rem 1.25rem;">
</li>
</ul>
</div>
</nav>
。Screenshot
最佳答案
您在第一行中将宽度设置为16.67％，对于内容来说太小了。您可以使用overflow: hidden隐藏内容，但似乎潜在的问题是为边栏设置的大小太小。