HTML / CSS / jQuery-使内联块div完全覆盖其包含的div，尽管它们的容器由较小的div包含

Question

我试图使菜单内的一些图标向右溢出，并在用户向右拖动菜单手柄时显示出来。 问题在于，内联块div不想覆盖其容器的整个空间，因为轮流将其容器包含在较小的div中（这似乎限制了图标向右移动的距离）。

在图像中，以蓝色突出显示的div（通过chrome dev工具）是图标的容器。 由于某些原因，这些行不会达到其全部宽度，而是保持凝缩在左侧，由菜单div分隔。

我希望这不是很令人困惑。 有人可以帮我吗？ 如何使图标完全占据其容器的宽度？ 非常感谢！

码：

图标的css，由jQuery设置

$("." + localIcons[iconToRender].name).css({
    "display": 'inline-block',
    "width": box_width,
    "height": box_height,
    "border-radius": '5px',
    "margin": box_margin / 2
 });

图标容器：

// appended to the body: <div class="box-menu"> <div class="box-menu-icon-container"> </div> </div>

$( ".box-menu").css({
    "position": 'absolute',
    //Remember that the width of the menu is set by dragging the jQuery handle, so here I just set a minimum width equal to the size of the handle
    "width": box_menu_handle_width,
    "min-width": box_menu_handle_width,
    "max-width": box_menu_max_width,
    "height": box_menu_height,
    "left": 0,
    "top": '50%',
    "margin-top": -( box_menu_height / 2 ),
    "background-color": box_menu_color,
    "border-radius": '0px 5px 5px 0px',
    "overflow": 'hidden'    
  });

  $(".box-menu-icon-container").css({
    "height": box_menu_height - 60,
    "width": box_menu_max_width
  });

Answer 1

您的问题是box-menu-handle是float: right ，这会使图标限制在打算用作菜单空间的位置。 请参阅此示例 。

换句话说，其设计不允许图标“渗透”到为菜单分配的空间上，该空间由控制菜单宽度的句柄定义。

如果确实要覆盖它，则需要消除该float: right ，而绝对将手柄定位在右侧。 请参阅此示例 。 我不知道所有这些将如何与菜单脚本的其他方面进行交互，但是它将允许图标“重叠”它们应该放置的空间并侵入菜单句柄（尽管这似乎是您想要的）我不知道为什么）。