不能向右移动“注销”按钮

Question

经过几个小时的研究和各种尝试，我似乎无法锻炼如何将这个登录按钮从我的海军酒吧到最右边的屏幕。

我已经尝试了我可以在网上找到的每一个例子，创建一个新的导航条，将浮动设置为右，文本对齐到右边，等等。

请查找所附的HTML/Django：

navbar.html：

<nav class="navbar navbar-expand-lg navbar-light bg-light p-0">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav" style="height: 4rem;">
            <li class="nav-item">
                <a class="nav-link p-3" href="{% url 'signed in' %}">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="{% url 'add meal' %}">Add Meal</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="{% url 'view private profile' %}">View Private Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="{% url 'view food log' %}">Food Log</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="{% url 'view friends' %}">Friends</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="{% url 'settings' %}">Settings</a>
            </li>
            <li class="nav-item" style="float: right">
                <a class="nav-link p-3" href="{% url 'logout' %}" style="background-color: #e85c29">Logout</a>
            </li>
        </ul>
    </div>
</nav>

谢谢您抽时间见我。

Answer 1

这是因为注销链接包含在导航栏中的div标记中。试着把它移出div块。

<nav style="background-color: green;" class="navbar navbar-expand-lg navbar-light bg-light p-0">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" width="100%" id="navbarNav">
            <ul class="navbar-nav" style="height: 4rem;">
                <li class="nav-item">
                    <a class="nav-link p-3" href="{% url 'signed in' %}">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link p-3" href="{% url 'add meal' %}">Add Meal</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link p-3" href="{% url 'view private profile' %}">View Private Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link p-3" href="{% url 'view food log' %}">Food Log</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link p-3" href="{% url 'view friends' %}">Friends</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link p-3" href="{% url 'settings' %}">Settings</a>
                </li>
            </ul>
        </div>
        <a class="nav-item mr-3 nav-link p-3" href="{% url 'logout' %}" style="background-color: #e85c29">Logout</a>
    </nav>

Answer 2

改变这个

<li class="nav-item" style="float: right">
                <a class="nav-link p-3" href="{% url 'logout' %}" style="background-color: #e85c29">Logout</a>
</li>

到这个

<li class="nav-item" style="float: right; width: 100%;">
                <a class="nav-link p-3" href="{% url 'logout' %}" style="background-color: #e85c29">Logout</a>
</li>