html - 如何在不删除导航的情况下将其向右对齐(显示:行内；)？

如何在不移除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;属性，因为它是使我的列表对齐的属性，请帮助（可能是一个菜鸟问题，哈哈）。

最佳答案

尝试一下（将text-align: right;添加到<ul>）：

的CSS

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

DEMO HERE

关于html - 如何在不删除导航的情况下将其向右对齐(显示:行内；)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33650304/