Question

我希望导航栏移动到屏幕的最右侧，但它不起作用。我尝试将它应用于不同的选择器，但没有任何改变。

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
</head>

<body>
    <header class="landing">
        <nav class="main-nav">
            <ul>
                <li><a href="#">Adopt</a></li>
                <li><a href="#">Donate</a></li>
                <li><a href="#">Visit</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

CSS：

.landing{
    float: right;
    width: 100%;
}

.main-nav{
    list-style: none;
}

.main-nav li{
    display: inline-block;
}

Answer 1

尝试将float：right应用到main-nav类，如下所示：

.main-nav {
    list-style: none;
    float:right;
}

Answer 2

您必须将float: right;放入.main-nav

＆＃13;

.landing{
    float: right;
    width: 100%;
}

.main-nav{
    list-style: none;
    float: right;
}

.main-nav li{
    display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
</head>

<body>
    <header class="landing">
        <nav class="main-nav">
            <ul>
                <li><a href="#">Adopt</a></li>
                <li><a href="#">Donate</a></li>
                <li><a href="#">Visit</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

＆＃13;

使用浮动

2 个答案: