首页 文章

角镖中角度分量的材料列表的错误

提问于
浏览
1

每当我试图填充物品的清单, material-listdisplay: inline-flex; 的Flex不会回应,该列表只得到水平对齐,但如果我改变从 material-list 的HTML代码 ul 它填充列表预期 . 那么,谁能说出我做错了什么?

enter image description here
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 回答

  • 1

    如果删除与flex相关的东西并添加以下样式,它应该换行

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

相关问题