display: none 仍然影响元素的放置答案

【问题标题】：display: none still effects placement of elementsdisplay: none 仍然影响元素的放置
【发布时间】：2016-09-20 04:52:36
【问题描述】：

我正在使用媒体查询创建我的投资组合网站，并为移动屏幕创建了一个导航选择下拉菜单。现在在 iPad 屏幕上，我想显示一个常规菜单，所以我设置了下拉菜单显示：无；在我的 CSS 中。

现在我注意到虽然它没有显示它仍然是可选的，并且导致我的常规菜单无法正常运行，因为它就在它的正下方。我放置在菜单下的 div 也会对下拉菜单做出反应，就像它仍然在那里一样。

为什么它是可选的？希望有人能帮帮我！

这是最重要的代码（我认为）

HTML

<div id="menu">
<nav>

<ul>
<li><a href="camera.html">camera / editing</a></li>
<li><a href="interface.html">interface</a></li>
<li><a href="illustration.html">illustration</a></li>
<li><a href="drawing.html">drawing</a></li>

</ul>

</nav>
</div>

<nav> 
  <select>
    <option selected>Find my work here!</option>
    <option value="camera.html">Camera / Editing</option>
    <option value="interface.html">Interface</option>
    <option value="illustration.html">Illustration</option>
    <option value="drawing.html">Drawing</option>  
  </select> 
</nav>


    <div id="bio"><a href="#">About Me</a>  
    <p>Lorem ipsum dolor sit amet</p></div>

</div>

还有 CSS

手机查询

nav{
top: 0;
width: 100%;
padding-top: 1em;
padding-bottom: .7em;
height: 80px;
background: url("afb/top fade.png") top center no-repeat;
}

nav select{
position: relative;
width: 100%;
font-size: 1em;
opacity: 1;

}

iPad 查询

#menu{
    padding-left: 3em;
    padding-right: 3em;
}

nav{
    background-image: none;
    position: static;
}

nav select{
    display: none;
}

nav ul:first-of-type{
    position: static;
    width: 100%;
    display: block;
    list-style: none;
    font-size: 1.4em;
}

（人们可以在http://nickzijlstra.com/resp查看完整的网站，只需使用浏览器大小，你就会看到会发生什么）

【问题讨论】：

请包含激活这些 CSS 样式的媒体查询。此外，您的 HTML 中有一个额外的结束 div。

标签： html css responsive-design

【解决方案1】：

当您的代码隐藏下拉导航 > 选择时，导航和任何关联的样式仍然存在。

向下拉导航添加一个类并根据需要隐藏它会怎样？

<nav class="dropdown"> 
<select>
<option selected>Find my work here!</option>
<option value="camera.html">Camera / Editing</option>
<option value="interface.html">Interface</option>
<option value="illustration.html">Illustration</option>
<option value="drawing.html">Drawing</option>  
</select> 
</nav>

对于 iPad 媒体查询

.dropdown{
display:none;
}

祝你好运！

【讨论】：