Question

我正在构建水平菜单，如果页面的宽度小于其项目的宽度，该菜单将折叠。我使用固定高度display: inline-block和overflow:hidden隐藏了屏幕上不适合的那些菜单元素。

但是，我有一个问题，要使菜单容器缩小以适合显示的菜单项的宽度，从而在最后显示的菜单项和椭圆之间的末尾保留一些空间。

在代码中查看它：https://jsfiddle.net/justdvl/w9a7qxvd/6/

    body {
      position: relative;
    }
    
    div.master {
      background-color: #333;
      height: 45px;
    }
    
    div.scrollmenu {
      float:left;
      height: 45px;
      max-width: calc(100% - 100px);
      background-color:darkblue;
      overflow: hidden;
    }
    
    div.element {
      display: inline-block;
      color: white;
      padding: 14px;
    }
    
    div.element:hover {
      background-color: #777;
      cursor: pointer;
    }
    
    div.ellipses {
        background-color: #913;
        float:left;
        padding: 14px;
        width:20px;
    
    }

<html>
    <body>
    <div class="master">
        <div class="scrollmenu">
            <div class="element" id="home">Home</div>
            <div class="element">News</div>
            <div class="element">Contact</div>
            <div class="element">About</div>
            <div class="element">Support</div>
            <div class="element">Blog</div>
            <div class="element">Tools</div>  
            <div class="element">BaseCamp</div>
        </div>
        <div class="ellipses">
            ...
        </div>
    </div> 
    </body>
    </html>

当我调整页面大小并显示/隐藏新菜单项时，我需要当前最后显示的菜单项和椭圆之间的空间保持恒定。

通过内联块缩小隐藏一些孩子的包装纸，缩小到显示的孩子宽度

0 个答案: