在左邊移動一個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浮動到左邊，以及。

如果您有多個元素與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的所有3向左浮動，所以他們旁邊的海誓山盟將出現。

如果你希望你的左箭頭出現在您的菜單選項卡的左側，則需要重新安排你的結構是這樣的：

<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 here