Mat-Nav-List horizontal instead of vertical?

Question

How do I make the following horizontal instead of the (apparent default) of vertical? It is located within navigation.component.html within my Angular 5.2.7 application that wa

Answer 1

Here's what I did to handle that horizontal navbar issue:

<mat-nav-list class="lists_class">
 <a routerLink="link" mat-list-item matLine class="link_class">name</a>
<mat-nav-list>

.lists_class {
    width: 100%;
}
.link_class {
    display: inline;
    float: left;
    width: min-content;
}

The key for me was adjusting the width. Hope this works/helps, cheers!