Html 如何水平对齐列表元素

我正在尝试创建标签的水平列表。我咨询过，但他们的方法不起作用。My

li

元素相互堆叠，不在以橙色显示的

ul

div中。如何制作标签的水平列表

HTML

<div class = "row">
        <div class = "cell">
            <div class = "album_container" >
                <a href = "">
                    <div class = "album_bar_wrapper">
                        <div class = "album_bar">
                            <div class = "float_left left_button"><a class = "buttons "><img class = "album_icon" src = "images/trash.png" alt = "trash" width = "30"/></a></div>
                            <div class = "float_right right_button"><a class = "buttons "> Edit </a></div>
                        </div>
                        <img class = "album_image" src = "images/defaultAlbum.png" alt = "default album" width = "300"/>
                    </div>
                </a>
                <ul class = "tags_list">
                    <li class = "tags">summer</li>
                    <li class = "tags">college</li>
                </ul>
            </div>
        </div>
</div>

---

（并删除绝对位置规则）

这就是如何水平显示ul的每一个li^^

ul{
显示：表格；
列表样式：无；
填充：0；
}
ulli{
显示：内联块；
填充物：5px；
}

一个
两个
三
四
五

删除

.tags{position:absolute；}

.tags_list {
    list-style-type: none;
}

ul.tags_list li {
    display: inline;
}

.tags {
    position: absolute; /*tags are positioned relative to album container*/
}

.tags_list > .tags 
  display: inline-block;
}