html - 如何在不删除的情况下将导航向右对齐(显示 : inline;)?

Question

如何在不删除 display: inline; 的情况下将导航栏对齐到右侧？如果我删除我的 display: inline;，li 会自动对齐到页面的右侧，但采用列表格式。

HTML

<div id="header">
    <div id="headerContainer">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>

CSS

    #headerContainer ul {
    list-style-type: none;
}
#headerContainer li {
    display: inline;
    padding-left: 10px;
    text-align: right;
}
#headerContainer a {
    text-decoration: none;
    color: white;
}
#headerContainer a:hover {
    color: black;
}

我不想删除我的 display: inline; 属性，因为它是使我的列表在一行中对齐的属性，请帮忙(可能是一个菜鸟问题，哈哈)。

Answer 1

试试这个(将 text-align: right; 添加到 <ul> ):

CSS

#headerContainer ul {
  list-style-type: none;
  text-align: right;
}

DEMO HERE