Home>

I want to display the label like the red circle in the photo, but it is not displayed. How will it be displayed?

Corresponding source code

          
          
<!-Hide from here->
      <label for = "label1"><i></i></label>
      <input type = "checkbox" />
.side-container label {
       float :;right:
       font-weight: bold;
       cursor: pointer;
       background-color: pink;
       display: block;
       font-size: 20px;
    }
    .side-container *: not (.sidelogo) {
       height: 0;
       padding: 0;
       overflow: hidden;
       opacity: 0;
       transition: 0.8s;
    }
    .side-container input {
       display: none;
}
 input: checked + .side-container {
    opacity: 1;
    display: block;
}
  • Answer # 1

    HTML doesn't have a div closing tag, just because it can't be copied

    Please correct the following in CSS.
    2nd line
    float :;right:

    float: right;

    Last line
    }
    ↓ Delete double-byte space
    }

    So, the label is still not displayed.
    With the CSS below.side-containerof.sidelogoBecause all offspring elements other than are hidden.

      .side-container *: not (.sidelogo) {
           height: 0;
           padding: 0;
           overflow: hidden;
           opacity: 0;
           transition: 0.8s;
        }


    If you remove it, the label will be displayed.
    (If you have a link to Font Awesome)

    Postscript

    After clicking the label (hamburger),
    If you want to show or hide the menu (list) in the .side-container,
    In HTMLlabelinputTo.side-containerYou should take it out of.

    
        
          <label for = "label1"><i></i></label>
          <input type = "checkbox" id = "label1" />
            
    <!-Hide from here->
    <!-Menu list->
            
        
    
    Further notes

    Maybe what you want to do is something like the following.

    
      
      <label for = "label1"><i></i></label>
      <input type = "checkbox" id = "label1" />
        
          
          <p>menu1</p>
          <p>menu2</p>
          <p>menu3</p>
          <p>menu4</p>
          
        
      
    
    .sidebar label {
      float: right;
      font-weight: bold;
      cursor: pointer;
      background-color: pink;
      display: block;
      font-size: 20px;
    }
    .side-container {
      height: 0;
      padding: 0;
      overflow: hidden;
      opacity: 0;
      transition: 0.8s;
    }
    # label1 {
      display: none;
    }
    # label1: checked ~ .side-container {
      height: auto;
      opacity: 1;
      display: block;
    }

    CodePen sample