时间戳

首页 > 解决方案 > 如何在换行符上隐藏 div

javascript - 如何在换行符上隐藏 div

问题描述

在由窗口调整大小引起的换行符后，是否有一种 css 方法来隐藏元素？我想要像亚马逊这样的导航栏的类似行为。如果减小窗口大小，空间不足的导航元素会折叠到新行，但元素会折叠到背景层，因此它们不再对布局产生影响并变得不可见。

特定屏幕尺寸的解决方案display:none不是我想要处理问题的方式。white-space:nowrap并且overflow:hidden也不能正确解决它，因为此方法仅适用于链接上的字母，而不是逐个元素（即 div）。

据我正确阅读亚马逊代码，他们用javascript解决了它。我对“唯一的 CSS 方式”非常感兴趣。有人有线索吗？

对于 nav + 元素，我的 css 代码非常简单：

.site-nav {
  position: relative;
  padding: 0;
  text-align: left;
  margin: 0 0 25px 0;

  a {
    padding: 3px 10px;
  }

   a:hover {
   padding: 3px 10px;
   background-color: #e6f2ff;
   color: #000000;
  }
  
  li {
    display: inline-block;
  }

如果我将white-space:nowrapand添加overflow:hidden到 .site-nav 我会得到类似的效果，但不一样。通过减小窗口大小，链接的字母会一一消失。但我希望整个<li>元素立即消失。

顺便说一句：代码在液体文件中：

    <div class="grid grid--no-gutters grid--table">
               {% if section.settings.align_logo == 'left' %}
        <nav class="grid__item small--hide" id="AccessibleNav" role="navigation">
          {% include 'site-nav' %}
        </nav>
      {% endif %}
    </div>

#########

更新 2： 仅在父 div 中使用white-space:nowrapwithoutoverflow:hidden似乎是一个很好的临时解决方案，因为它直接切换到下一个较小的媒体查询外观。

标签： javascripthtmlcss

解决方案

推荐阅读