在左边移动一个div，在一个div的右边移动另一个div

Question

我正在使用jquery处理这个可滚动的选项卡。 它工作正常，但我面临的唯一问题是两个箭头div的位置。 它们都是float:left但不知何故在主要标签容器的右边堆叠在一起。 这两个div都是在运行时创建的。 我希望这两个箭头div的位置是：开始时（标签前）的左箭头div和末尾的右箭头div（标签后）。 任何帮助或建议都将受到欢迎。

JQuery代码如下，但要看它工作，请转到此处： JSFiddle

(function ($) {
        var settings = {
            barheight: 38
        }
        $.fn.scrollabletab = function (options) {
            var ops = $.extend(settings, options);
            var ul = this.children('ul').first();
            var ulHtmlOld = ul.html();
            var tabBarWidth = $(this).width() - 60;
            ul.wrapInner('<div class="fixedContainer" style="height: ' + ops.barheight + 'px; width: ' + tabBarWidth + 'px; overflow: hidden; float: left;"><div class="moveableContainer" style="height: ' + ops.barheight + 'px; width: 5000px; position: relative; left: 0px;"></div></div>');
            ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
            var leftArrow = ul.children().last();
            leftArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-w" } });
            leftArrow.children('.ui-icon-carat-1-w').first().css('left', '2px');
            ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 1px; margin-right: 0;"></div>');
            var rightArrow = ul.children().last();
            rightArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-e" } });
            rightArrow.children('.ui-icon-carat-1-e').first().css('left', '2px');
            var moveable = ul.find('.moveableContainer').first();
            leftArrow.click(function () {
                var offset = tabBarWidth / 6;
                var currentPosition = moveable.css('left').replace('px', '') / 1;
                if (currentPosition + offset >= 0) {
                    moveable.stop().animate({ left: '0' }, 'slow');
                }
                else {
                    moveable.stop().animate({ left: currentPosition + offset + 'px' }, 'slow');
                }
            });
            rightArrow.click(function () {
                var offset = tabBarWidth / 6;
                var currentPosition = moveable.css('left').replace('px', '') / 1;
                var tabsRealWidth = 0;
                ul.find('li').each(function (index, element) {
                    tabsRealWidth += $(element).width();
                    tabsRealWidth += ($(element).css('margin-right').replace('px', '') / 1);
                });
                tabsRealWidth *= -1;
                if (currentPosition - tabBarWidth > tabsRealWidth) {
                    moveable.stop().animate({ left: currentPosition - offset + 'px' }, 'slow');
                }
            });
            return this;
        }; // end of functions
    })(jQuery);
    $(function () {
        $("#tabs").tabs().scrollabletab();
    });

Answer 1

您的箭头都出现在fixedContainer右侧的fixedContainer是因为您的fixedContainer也浮动到左侧。

如果你有多个float: left;元素float: left; ，它们将按照它们出现的顺序彼此相邻堆叠。 您的HTML呈现如下：

<div class="fixedContainer"></div>   <!-- your menu tabs -->
<div role="button"></div>            <!-- your left arrow -->
<div role="button"></div>            <!-- your right arrow -->

所有这三个div都浮动到左边，所以它们会出现在彼此旁边。

如果您希望左箭头显示在菜单选项卡的左侧，则需要重新排列结构，如下所示：

<div role="button"></div>            <!-- your left arrow -->
<div class="fixedContainer"></div>   <!-- your menu tabs -->
<div role="button"></div>            <!-- your right arrow -->

为此，您需要更改左箭头的Javascript代码，如下所示：

ul.prepend('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
var leftArrow = ul.children().first();

这将在prepend()箭头而不是append() ，因此它出现在fixedContainer之前。

JSFiddle在这里