[英]CSS: center all list elements except last one
I'm trying to create a navbar which contains a title, some buttons and a username.我正在尝试创建一个包含标题、一些按钮和用户名的导航栏。 I'm trying to align the buttons to the center and the username to the right, while the title stays to the left.
我试图将按钮与中心对齐,将用户名向右对齐,而标题保持在左侧。 Whatever I try, I can't get it to work.
无论我尝试什么,我都无法让它发挥作用。 It either centers the buttons and the username, or it aligns it all to the left.
它要么将按钮和用户名居中,要么将它们全部向左对齐。
I have the feeling some conflicting styling is causing the problem, however I'm not sure and was wondering if someone could help me out.我感觉一些冲突的样式导致了问题,但是我不确定并且想知道是否有人可以帮助我。
.sidenav-container {
height: 100%;
}
.sidenav {
width: 200px;
}
.sidenav .mat-toolbar {
background: inherit;
}
.mat-toolbar.mat-primary {
position: sticky;
top: 0;
z-index: 1;
}
a {
text-decoration: none;
color: white;
}
a:hover,
a:active {
color: lightgray;
}
.icon {
display: inline-block;
height: 30px;
margin: 0 auto;
padding-right: 15px;
text-align: center;
vertical-align: middle;
width: 15%;
}
.label {
display: inline-block;
line-height: 30px;
margin: 0;
width: 85%;
}
#footer {
position:fixed;
left:0px;
bottom:0px;
height:40px;
width:100%;
background: white;
}
#menu
{
width: 100%;
margin: 0;
padding: 20px 0 0 0;
list-style: none;
display: inline-block;
}
#menu > li:last-child{
float: right;
}
<mat-sidenav-container>
<mat-sidenav #sidenav role="navigation">
<mat-nav-list>
<a mat-list-item [routerLink]="['post/list']">
<mat-icon class="icon">forum</mat-icon>
<span class="label">Posts</span>
</a>
<a mat-list-item [routerLink]="['news']">
<mat-icon class="icon">chrome_reader_mode</mat-icon>
<span class="label">News</span>
</a>
<a mat-list-item [routerLink]="['about']">
<mat-icon class="icon">dashboard</mat-icon>
<span class="label">About</span>
</a>
<a mat-list-item>
<mat-icon class="icon">output</mat-icon>
<button (click)="logout()">Logout</button>
</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<div fxHide.gt-xs>
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
</div>
<div>
<a [routerLink]="['']">
BRICKER
</a>
</div>
<div fxFlex fxHide.xs>
<ul fxLayout fxLayoutGap="20px" id="menu">
<a mat-list-item [routerLink]="['post/list']">
<mat-icon class="icon">forum</mat-icon>
<span class="label">Posts</span>
</a>
<li>
<a mat-list-item [routerLink]="['news']">
<mat-icon class="icon">chrome_reader_mode</mat-icon>
<span class="label">News</span>
</a>
</li>
<li>
<a [routerLink]="['about']">
<mat-icon class="icon">dashboard</mat-icon>
<span class="label">About</span>
</a>
</li>
<li>
<span *ngIf="(loggedInUser$ | async) as user" class="label"> <button mat-button [matMenuTriggerFor]="menu"
style="font-size:24px;">{{user}}</button>
<mat-menu #menu="matMenu">
<button mat-menu-item [routerLink]="['post/owned']">My Posts</button>
<button mat-menu-item (click)="logout()">Logout</button>
</mat-menu>
</span>
</li>
</ul>
</div>
</mat-toolbar>
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
Are u expecting like this: 您是否期望这样:
li:last-child { color: lime; background-color: black; text-align:left; /*change this if you want to align right */ padding: 5px; } li{ text-align:center; list-style:none; }
<ol> <li>one</li> <li>two</li> <li>Three</li> </ol> <ol> <li>four</li> <li>five</li> <li>six</li> </ol>
You could thy creating classes like: 您可以创建类似以下的类:
.right {
text-align: right !important;
}
.left {
text-align: left !important;
}
And use those in the elements you want 并在您想要的元素中使用它们
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.