如何水平对齐列表元素

Question

我正在尝试创建一个水平的标签列表。我咨询了W3Schools，但他们的方法不起作用。我的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>

CSS

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

ul.tags_list li {
    display: inline;
}

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

Answer 1

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

（并删除绝对位置规则）

Answer 2

这是如何横向显示ul ^^

的每一个li

＆＃13;

＆＃13;

    ul {
        display: table;
        list-style: none;
        padding: 0;
    }

    ul li {
        display: inline-block;
        padding: 5px;
    }

＆＃13;

    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
    </ul>

＆＃13;

＆＃13;

＆＃13;