Fehler der Materialliste der Winkelkomponenten in Winkelpfeil

Question

Immer wenn ich versuche, eine Liste von Element mit material-list in einer zu füllen, antwortet der Flex nicht, die Liste wird nur horizontal ausgerichtet, aber wenn ich den HTML-Code ändern material-list bis ul es füllt die Liste wie erwartet. Kann mir jemand sagen, was ich falsch mache?

list.html

<div class="demo-list-content"> 
    <material-list> 
     <material-list-item> 
      <material-icon icon="home"></material-icon> 
      <div class="demo-list-item">Item 1</div> 
     </material-list-item> 
     <material-list-item> 
      <material-icon icon="home"></material-icon> 
      <div class="demo-list-item">Item 1</div> 
     </material-list-item> 
     <material-list-item> 
      <material-icon icon="home"></material-icon> 
      <div class="demo-list-item">Item 1</div> 
     </material-list-item> 
     <material-list-item> 
      <material-icon icon="home"></material-icon> 
      <div class="demo-list-item">Item 1</div> 
     </material-list-item> 
     <material-list-item> 
      <material-icon icon="home"></material-icon> 
      <div class="demo-list-item">Item 1</div> 
     </material-list-item> 
    </material-list> 
</div> 

list.css

.demo-list-content { 
    margin: 24px; 
} 

material-list { 
    padding: 16px; 
    display: inline-flex; 
} 

material-list-item { 
    width: 200px; 
    display: inline; 
    flex-direction: column; 
    border: solid; 
    margin: 16px; 
    text-align: center; 
} 

.demo-list-item { 

} 

Answer 1

Wenn Sie das Flex-bezogenes entfernen und fügen Sie den folgenden Stil sollte es wickeln

.material-list-item { 
    float: left; 
}