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

Answer 2

你需要为headerContainer设置float：right。

<强> 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 {
    float:right;
    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;
}

http://codepen.io/anon/pen/OyawoG

Answer 3

将float:right添加到ul（不是li或您的菜单顺序将被颠倒）。这将允许您在标题中包含其他元素（徽标？），但只有您的菜单才会浮动到右侧。

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

jsfiddle

如何在不删除的情况下将导航右对齐（display：inline;）？

3 个答案: