每当我尝试用material-list
中的display: inline-flex;
填充项目列表时,flex都不会响应,该列表只会水平对齐,但是如果我将HTML代码从material-list
更改为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 {
}
最佳答案
如果删除与flex相关的内容并添加以下样式,则应将其包装
.material-list-item {
float: left;
}
关于dart - Dart 中角组件的 Material list 的误差,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46274780/