我在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>
答案 0 :(得分：2)
您在第一行中将宽度设置为16.67％，这对于内容来说太小了。您可以使用overflow: hidden隐藏内容，但似乎潜在的问题是侧边栏的尺寸设置太小。
答案 1 :(得分：0)
您可以使用css overflow-x：hidden;
<nav class="sidebar" [ngClass]="{sidebarPushRight: isActive}" style="width:16.67%;overflow-x: hidden;">
<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>
答案 2 :(得分：0)
如果它应该禁用滚动，只需执行：
overflow-x: hidden;
在你身边的导航
答案 3 :(得分：0)
在导航栏的内联样式中再添加两个属性。
<nav class="sidebar" [ngClass]="{sidebarPushRight: isActive}" style="width:16.67%;position: fixed; overflow:hidden;">
如果您在浏览器窗口最小化时不希望侧边栏缩小，则可以删除position:fixed;。希望它有所帮助。