HTML "Input"按钮在插入 标签时停止工作

Question

我试图通过在使用 480 像素或更小的设备时创建可折叠菜单来使我的网站适合移动设备。我找到了一个很棒的演示并且它完美运行:How To Create A Responsive Navigation Menu Using Only CSS我想自定义菜单并将其放在 Header div 标记中。您可以转到上面的链接查看完整代码。它确实有效，但是，如果我将 HTML 代码插入到 div 标记中，它就会停止工作!我可以将全部代码放入一个 div 标记中，但这违背了仅使用直接 HTML 和 CSS 来创建此可折叠菜单的目的!

当在笔记本电脑或 PC 上查看时，我想将其设置为两栏式网站，菜单位于左侧。我的工作正常，但是一旦我将菜单更改为使用标题 div 内的可折叠菜单，它就会停止工作!

所以我的代码如下:

<div id="header">
<div class="topcenter">
    <p>Consultants and Suppliers of <br />Affordable, Natural, Quality,
    <br />Sustainable Power Solutions!</p>
</div>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
</div>

<div class="wrapper">
<div id="left">
    <ul id="menu">
        <li><a href="#" title="Power" >Power Up Belize</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Experience</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Contact Us</a></li>
    </ul>
</div>

并且 CSS 几乎与示例中的完全相同 - 我已经证明当标签和输入框不在标题 div 标记内时它可以工作，但一旦我将菜单 HTML 放入其中它也会中断包装 div!是什么赋予了？为什么我无法让输入框在 div 标签内正常工作？

如有任何帮助，我们将不胜感激!提前致谢!

这是我更新后的代码(但它仍然不起作用 :-( )

    @media screen and (max-width : 480px)
{
    /*Change Header imge and font size for Mobile */
    #header
    {
        position: relative;
        top: .25em;
        text-align: center;
        font-size: 90%;
        font-weight: Bold;
        padding-bottom: 2.5em;
        background-image: url('../images/PUBLogoSm.png');
        background-repeat: no-repeat;
        background-position: center top;
        width: 100%;
        height: 130px;
        display: inline-block;
    }
    .topcenter
    {
        position: relative;
        top: 6em;
        text-align: center;
        color: #017f02;
        width: 99%;
        font-weight: bold;
        text-decoration: none;
        padding-bottom:1em;
    }

    /*Make dropdown links appear inline*/
    ul {
        position: static;
        display: none;
        }
    /*Create vertical spacing*/
    li {
        margin-bottom: 1px;
        }
    /*Make all menu links full width*/
    ul li, li a {
        width: 100%;
        }
    /*Display 'show menu' link*/
    #show-menu, #menu {
        display: none;
        }
    #show-menu:checked ~ #menu {
        display: block;
    }
}


    <div id="header">
    <div class="topcenter">
        <p>Consultants and Suppliers of <br />
         Affordable, Natural, Quality,<br />Sustainable Power Solutions!</p>
    </div>
    <label for="show-menu" class="show-menu">Show Menu</label>
    </div>

    <div class="wrapper">
        <div id="left">
            <ul id="menu">
                <li><a href="#" title="Power" >Power Up Belize</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Experience</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Contact Us</a></li>
            </ul>
        </div>
    </div>

Answer 1

你可以移动<input type="checkbox" ...就在<ul id="menu">之前.这样，一般的兄弟选择器 ~或下一个兄弟选择器 +将重新开始工作。

#show-menu, #menu {
    display: none;
}
#show-menu:checked ~ #menu {
    display: block;
}

<div id="header">
    <label for="show-menu" class="show-menu">Show Menu</label>
</div>

<div class="wrapper">
    <input type="checkbox" id="show-menu" role="button"/>
    <ul id="menu">
        <li><a href="#">Power Up Belize</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Experience</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

编辑: JsFiddle example 实现了媒体查询。