响应式网站汉堡行未显示

Question

我正在尝试获得 'hamburger lines' 缩小响应式网站时获得的结果。但是我得到的线并没有像应该的那样堆叠，而是并排排列：

这是线条的图片：

代码：

    *
    {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    body
    {
        background-image: url(background.jpg);
        background-size: cover;
        background-position : center;
        
        font-family: sans-serif;
    }
    
    .menu-bar
    {
        background: #273044;
        text-align: center;
         
    }
    .menu-bar ul
    {
        display: inline-flex;
        list-style: none;
        color: #fff;
        
    }
    
    .menu-bar ul li
    {
    width: 120px;
    place-items:center;
    display: grid;
    padding: 0px;  
    }
    
    .menu-bar ul li a
    {
    text-decoration: none;
    color: white;   
    }
    .active, .menu-bar ul li:hover
    {
    background-color: #0b56ab;
    height:auto;
    
    height:30px;
    } 
    
    .toggle-button{
        position: absolute;
        top: 0.75rem;
        right: 1rem;
        display: flex;
        flex-direction: none;
        justify-content: space-between;
        width: 31px;
        height: 21px;
    }
    
    .toggle-button .bar{
        height: 3px;
        width: 100%;
        background-color: white;
        border-radius: 10px;
    
    }
    
    @media(max-width: 400px){
        .toggle-button{
            display:flex;
        }
        
    }
    
    
    /* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */

    <html>
        <head> 
            <title> Title of page    </title>
            <link rel="stylesheet" href="style.css">
            <link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css">
        </head>
    
    <!----header----> 
        <body> 
            <div class="menu-bar">
                <a href = "#" class="toggle-button">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
    
                </a>
              
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Investors</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Training </a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </div>
    
    
    
            <div class= "grid"> 
                
            </div>
    
        </body>
    </html>

你能看看我的代码并告诉我我忽略了什么吗？

Answer 1

这不是三行的解决方案，但您可以使用 SVG：

.hamburger {
  width: 12rem;
  height: 12rem;
}

<svg xmlns="http://www.w3.org/2000/svg" class="hamburger" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>

Answer 2

您需要更改为在 a 标签和 span 上显示块

    .toggle-button{
        position: absolute;
        top: 0.75rem;
        right: 1rem;
        display: block;
        width: 31px;
        height: 21px;
    }
    
    .toggle-button .bar{
        height: 3px;
        width: 100%;
        background-color: white;
        border-radius: 10px;
        display: block;
        margin-bottom: 3px;
    }

Answer 3

您没有将 flex-direction 指定为 column

+（我稍微修改了你的 css 代码）

*
    {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    body
    {
        background-image: url(background.jpg);
        background-size: cover;
        background-position : center;
        
        font-family: sans-serif;
    }
    
    .menu-bar
    {
        background: #273044;
                display: inline-flex;

        text-align: center;
        align-items:center;

         
    }
    .menu-bar ul
    {
        display: inline-flex;
        align-items:center;
        list-style: none;
        color: #fff;
        
    }
    
    .menu-bar ul li
    {
    min-width: 120px;
    align-self:center;
    display: grid;
    padding: 0px;  
    }
    
    .menu-bar ul li a
    {
    text-decoration: none;
    color: white;   
    }
    .active, .menu-bar ul li:hover
    {
    background-color: #0b56ab;
    height:auto;
    
    height:30px;
    } 
    
    .toggle-button{
        position: absolute;
        right: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 31px;
        height: 21px;
    }
    
    .toggle-button .bar{
        height: 3px;
        width: 100%;
        background-color: white;
        border-radius: 10px;
    
    }
    
    @media(max-width: 400px){
        .toggle-button{
            display:flex;
        }
        
    }
    
    
    /* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */

<html>
        <head> 
            <title> Title of page    </title>
            <link rel="stylesheet" href="style.css">
            <link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css">
        </head>
    
    <!----header----> 
        <body> 
            <div class="menu-bar">
                <a href = "#" class="toggle-button">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
    
                </a>
              
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Investors</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Training </a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </div>
    
    
    
            <div class= "grid"> 
                
            </div>
    
        </body>
    </html>

响应式网站汉堡行未显示

Responsive website hamburger line not showing up

css