无法向右移动 'logout' 按钮

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

改变这个

<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>

Answer 2

这是因为注销 link 包含在导航栏的 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>

无法向右移动 'logout' 按钮

Can't move 'logout' button to the right

css

django

nav

right-align

bootstrap-5