每当我试图填充物品的清单, material-list
在 display: inline-flex;
的Flex不会回应,该列表只得到水平对齐,但如果我改变从 material-list
的HTML代码 ul
它填充列表预期 . 那么,谁能说出我做错了什么?
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 {
}
1 回答
如果删除与flex相关的东西并添加以下样式,它应该换行