首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >不能向右移动“注销”按钮

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

Stack Overflow用户
提问于 2022-03-13 16:10:28
回答 2查看 2.3K关注 0票数 0

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

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

请查找所附的HTML/Django:

navbar.html:

代码语言:javascript
复制
<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>

谢谢您抽时间见我。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-03-13 21:34:14

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

代码语言:javascript
复制
<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>
票数 1
EN

Stack Overflow用户

发布于 2022-03-13 16:15:39

改变这个

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

到这个

代码语言:javascript
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71458540

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档