CSS/HTML |将注册移动到菜单底部的最佳方式是啥？ [复制]

Posted 2023-03-05

【中文标题】CSS/HTML |将注册移动到菜单底部的最佳方式是啥？ [复制]

【英文标题】：CSS/HTML | Whats the best way to move signup to the bottom of the menu? [duplicate]CSS/HTML |将注册移动到菜单底部的最佳方式是什么？ [复制]

【发布时间】：2021-04-07 13:45:07

【问题描述】：

如何将“注册”移动到nav bar 的底部。

看起来mobilemenu 保证金优先。我不是 100% 确定如何解决这个问题

我尝试了多种方法，例如 > 和 + 这样的符号。此外，我尝试将边距编辑移动到每个类“主”和“帐户”，但 mobilemenu 是导航栏本身。

HTML：

<style>
    <%@include file="../css/header/header.css" %>
</style>
<!-- Mobile Navigation -->
<script>var checkbox = document.querySelector('#myInput');
var icon = document.querySelector('#menuToggle span');
var listener = function (e) 
    if (e.target != checkbox && e.target != icon) 
        checkbox.checked = false;
        document.removeEventListener('click', listener);
    
;

checkbox.addEventListener('click', function () 
    if (this.checked) 
        document.addEventListener('click', listener);
    
);
</script>
<header>
    <nav role="navigation">
        <div id="menuToggle">
            <input type="checkbox" id="myInput"/>
            <span></span>
            <span></span>
            <span></span>
            <ul class="mobilemenu">
                <li><a href="#about" class="main">About Me</a></li>
                <li><a href="#experience" class="main">Experience</a></li>
                <li><a href="#projects" class="main">Projects</a></li>
                <li><a href="#about" class="main">About Me</a></li>
                <li><a href="#experience" class="main">Experience</a></li>
                <li><a href="#projects" class="main">Projects</a></li>
                <li><a href="#projects" class="account">Sign Up</a></li>
            </ul>
        </div>
    </nav>
</header>

CSS：

/* Mobile Menu */
body 
    background: #1F2833;
    font-family: 'Source Sans Pro', sans-serif;
    color: #66FCF1;


#menuToggle 
    display: block;
    position: relative;
    top: 20px;
    left: 20px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
    padding: 6px 4px 1.5px 4px;


#menuToggle a 
    text-decoration: none;
    transition: color 0.3s ease;


#menuToggle a:hover 
    color: #45A29E;


#menuToggle input 
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;


#menuToggle span 
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #0b0C10;
    border-radius: 1px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;


#menuToggle span:first-child 
    transform-origin: 0% 0%;



#menuToggle span:nth-last-child(2) 
    transform-origin: 0% 100%;


#menuToggle input:checked ~ span 
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #66FCF1;


#menuToggle input:checked ~ span:nth-last-child(3) 
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);


#menuToggle input:checked ~ span:nth-last-child(2) 
    transform: rotate(-45deg) translate(0, -1px);




.mobilemenu 
    width: 8.7rem;
    height: 100%;
    margin: -80px -20px 0 -35px;
    padding: 25px;
    padding-top: 75px;
    padding-bottom: 20px;
    background: #0b0C10;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    position: fixed;
    vertical-align: middle;


.mobilemenu li 
    padding: 10px 0;
    padding-left: 20px;
    font-size: 22px;


.mobilemenu .main
    color: #66FCF1;


#menuToggle .account
    color: #66FCF1;
    padding-top: 200px;


#menuToggle input:checked ~ ul 
    transform: none;

【问题讨论】：

flexbox 是我想说的最佳选择

【参考方案1】：

使用 span 标签，如：

<li> <span class="myaccount"> <a href="#projects" >Sign Up</a></span> </li>

或 P 标签：

<li> <p class="myaccount"><a href="#projects" >Sign Up</a></p></li>

改变这个

    
    
#menuToggle .account
    color: #66FCF1;
    padding-top: 200px;

到：

    
.myaccount
    color: #66FCF1;
    padding-top: 60px;

您可以编辑填充或边距。

【讨论】：

这很好用！但我的 css 有一个跨度标签编辑，使一切变得不合适。如果我没有 span 标签，这肯定会奏效。我相信 p 标签有一个先天的换行符。那也没用。

您可以使用内联样式编辑 p 标签

【参考方案2】：

.account
    position: absolute;
    bottom:0;

【讨论】：

这很好用；我现在可以将此模式用于我想要的底部链接，例如注册和登录

【参考方案3】：

你可以试试这个代码：

.mobilemenu li:last-child
  position:absolute;
  bottom:1rem;
  left:2rem;

这会很好用。

如果你想试试 flex-box。您可以使用以下代码：

.mobilemenu 
  width: 8.7rem;
  height: 90vh;
  /* margin: -80px -20px 0 -35px; */
  padding: 25px;
  padding-bottom: 20px;
  background: #0b0c10;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  /* transform: translate(-100%, 0); */
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  position: fixed;
  vertical-align: middle;
  display: flex;
  flex-direction: column;


.mobilemenu li:nth-child(6) 
  flex: 1;

<header>
    <nav role="navigation">
        <div id="menuToggle">
            <input type="checkbox" id="myInput"/>
            <span></span>
            <span></span>
            <span></span>
            <ul class="mobilemenu">
                <li><a href="#about" class="main">About Me</a></li>
                <li><a href="#experience" class="main">Experience</a></li>
                <li><a href="#projects" class="main">Projects</a></li>
                <li><a href="#about" class="main">About Me</a></li>
                <li><a href="#experience" class="main">Experience</a></li>
                <li><a href="#projects" class="main">Projects</a></li>
                <li><a href="#projects" class="account">Sign Up</a></li>
            </ul>
        </div>
    </nav>
</header>

【讨论】：

感谢您的建议！如果 Signup 是我在底部唯一想要的东西，这会奏效；我也想要登录。

位置：绝对；在这种情况下可能会有所帮助:) 第一种方法。实际上有很多方法可以解决特定问题:) 这也可以通过网格来实现:)

如果您在底部注册并登录...但是最好的解决方案是将它们都包装在容器 div 中。然后使用绝对位置。或者用基本的修改 flex-box :)