title: How to align mat-list-item to horizontal without changing its base module css?
body: <p>I have a <code>mat-list</code> in which I'm iterating my data and displaying my requirement is to align the list in horizontal fashion. This can be easily achieved by using simple <code>&lt;ul&gt;</code> but I'm using material and want to utilize the <code>mat-list</code> feature of it.
  Since material controls come with their on CSS and if we want to change the existing look n feel we need to change it in the base css file.
  I don't want to change the main <code>mat-list-item</code> css file since it is being many places in the project.
  I just want to align the <code>mat-list-item</code> horizontal.</p>
  
  <pre><code>&lt;mat-list&gt;
    &lt;mat-list-item *ngFor="let privlege of userprivilege"&gt; {{privlege}} &lt;/mat-list-item&gt;
  &lt;/mat-list&gt;
  
  
  
  
   .mat-list-item {
   float: right;
   display: list-item;
   }
  </code></pre>
  
  <p>I'm new to angular material if anyone can suggest a good way to achieve it would be appreciative.
  I did not find the way to do it any where else. </p>