在左邊移動一個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在這里