Question

需要这方面的帮助，我找不到任何其他解决方案

基本上我需要的是在屏幕宽度上水平调整图标列表

所以，如果我有水平七个图标，那么当我在平板电脑中时，那些不适合的图标会转到某个具有上下滑动效果的div

所以如果ipad只显示6个图标，那么第七个图标将显示在div

上

我有一张插图图片

https://scontent-hkg.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/s480x480/10561708_10206712852445687_4831295921092928962_n.jpg?oh=fb34cea324bdaf9dfbd104b8ff04698d&oe=557FD113

我真的需要帮助，谢谢

Answer 1

奥利弗，

这是一个广泛的问题，因为有几种方法可以解决这个问题。我相信有一个或两个库可以帮助你实现这一目标。如果您打算自己动手，则需要从以下任务开始。

检测屏幕尺寸何时发生变化。这可以通过计时器或使用window.onresize事件来完成。
一旦屏幕尺寸发生变化，您需要检查按钮元素及其包装，以确定哪些元素不再出现在屏幕上。
最后，您需要将这些溢出元素移动到辅助导航菜单。

为了帮助您入门，我使用jQuery组合了一个简单的示例来完成此任务。请参阅本文底部的JSFiddle以获取完整的工作示例。

$(document).ready(function() {
    // Get reference to our static elements 
    // one time at load for performance
    var $nav = $('nav');
    var $primaryList = $nav.find('.primary-list ul');
    var $overflowList = $nav.find('.overflow-list ul');
    var $overflowButton = $('#show-overflow');

    // Bind our overflow toggle for the overflow list
    $overflowButton.click(function() {
        $nav.toggleClass('show-overflow');
    });

    // Bind our resize event so we know when
    // viewport size changes
    $(window).resize(function() {
        // Find our last item in primary list
        var $pl = $primaryList.find('li:last');
        // Figure out the right side of our last element
        var x = $pl.position().left + $pl.outerWidth();
        var listWidth = $primaryList.innerWidth();
        // Check to see if this is outside of our menu
        if (x > listWidth) {
            // Since this is outside we move it to overflow
            $pl.prependTo($overflowList);
            // Show our overflow button
            $overflowButton.show();
        } else {
            // Since this didn't overflow lets see if we have enough
            // room to move an overflow element back to the primary list
            var $ol = $overflowList.find('li:first');
            // Check to see if we found an overflow element
            if ($ol.length > 0) {
                // Check to see if this one will fit
                if (x + $ol.outerWidth() <= listWidth) {
                    // Move it back to the primary list
                    $ol.appendTo($primaryList);
                }
            } else {
                // Hide our overflow button
                $overflowButton.hide();
            }
        }
    }).resize();
});

https://jsfiddle.net/gayv02gy/2/

干杯！

Answer 2

如果没有您正在构建的代码示例，很难在目标上回答这样的问题。有无数种方法可以达到这样的效果。出于这个原因，我将尽力回答您提出我可能想到的最简单的代码（没有JS，只有内联CSS和HTML）。

尝试下面的代码段：

＆＃13;

<div style="width:100%; height: 30px; margin: auto auto; text-align:center; display:block; border:1px solid yellow;">
  <span style="width:30px; height: 30px; border:1px solid orange; display:inline-block;">A</span>
  <span style="width:30px; height: 30px; border:1px solid red; display:inline-block;">B</span>
  <span style="width:30px; height: 30px; border:1px solid green; display:inline-block;">C</span>
  <span style="width:30px; height: 30px; border:1px solid blue; display:inline-block;">D</span>
  <span style="width:30px; height: 30px; border:1px solid pink; display:inline-block;">E</span>
</div>

＆＃13;

请注意＆＃34; SPAN＆＃34;中唯一需要的CSS允许它自动居中的对象是：＆＃34; 显示：内联块＆＃34;。

＆＃34; DIV＆＃34;另一方面，容器正好需要你在内联CSS中看到的内容（当然除了边框之外，这只是为了帮助你可视化结果）。

享受编码。 ;）

水平堆积图标和响应

2 个答案: