右对齐导航栏答案

【问题标题】：Right-aligned navigation bar右对齐导航栏
【发布时间】：2018-04-27 18:07:12
【问题描述】：

导航菜单未向右对齐。请帮忙！

** HTML 代码：**

<nav id="main">
    <ul>
        <li><a href="work.html">Work</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>   
</nav>

** CSS 代码（不工作）：**

nav#main li {
    float: left;
    text-decoration: none;
    text-align: center;
}

我试过了，但没用：

nav#main {
    float: right;
}

【问题讨论】：

如果你想让nav#main li 右对齐，如何使用float:right？
谢谢，但是列表重新排序（工作/关于/联系）变成了（联系/关于/工作），而不是向右移动。
你在使用引导程序吗？
不，只是普通的旧 HTML5 和 CSS3，没有别的。

标签： html css right-align

【解决方案1】：

尝试为您的导航项设置宽度或将其显示属性设置为内联块。它是一个块级元素，因此默认情况下它会占用所有可用的水平空间。因此，如果它是 100% 宽，您将看不到它的对齐/浮动位置。

nav#main {
   display: inline-block;
}

或

nav#main {
   width: 50% /*for example*/
}

【讨论】：

后一个选项忘记了分号。对不起。
谢谢，第一个建议将列表（工作/关于/联系）重新排序为（联系/关于/工作），而不是向右移动。
第二个建议只会使单词之间的距离变小，但不会将整个内容向右移动。

【解决方案2】：

试试这个，你不需要任何浮动，它可以工作

nav#main ul li  {
text-align: right;
text-decoration: none;
display:inline-block;
}

#main{
text-align: right;
 }


<nav id="main">
<ul>
    <li><a href="work.html">Work</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>   
</nav>

【讨论】：

谢谢，但不幸的是它不起作用。我仍然把（关于联系人的工作）粘在屏幕的左侧。