时间戳

首页 > 解决方案 > 右对齐导航栏

html - 右对齐导航栏

问题描述

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

** 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;
}

标签： htmlcssright-align

解决方案

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

nav#main {
   display: inline-block;
}

或者

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

推荐阅读