防止块元素溢出父元素的宽度

Question

我有一个菜单（jsfiddle），如下所示，它是从<ul>和<li>元素构建的。

子元素菜单元素显示在父元素下方，容器是固定宽度<ul>。我遇到的问题是，对于右边的菜单元素，这个第二级<ul>溢出了父元素的宽度，如下所示：

如何确保子菜单显示在第一张图片中，但对于菜单元素，只需移动到右边框，保持大小完整，而不是溢出？

Answer 1

添加到你的容器overflow-x（你希望保持y也许......）隐藏..

#navigation{
    width:900px;
    margin:0px 0 13px;
    padding:0px;
    float:left;
    background:#3b6daa;
    overflow-x:hidden; <------------------------------- note the X..
}

或者只是确保您的菜单不是固定的宽度：

#navigation>ul li ul {
    float: left;
    padding: 8px 0;
    position: absolute;
    left:auto; 
    top:42px;
    display: none;
    width:auto;   <------------------- will make it adjust to the contain and the content
    background: #81abdd;
    color: #1c508e;
    list-style: none;
}

或者如果你想要将它对齐不同（比如与父项的右边或左边对齐的工具提示......那么我建议你沿着javascript路径前进..）

以下是一些例子：

对齐的例子 jquery vertical align 2 divs

jQuery位置（也检查宽度等） http://api.jquery.com/position/

一个很棒的工具提示，可以控制周围的一切 http://craigsworks.com/projects/qtip/

没有开箱即用的例子，但这应该给你正确的方向我相信..

Answer 2

您可以使用overflow: hidden;为所有元素添加父div。

赞this

Answer 3

将以下内容添加到您的容器中：

overflow-x: hidden;

您还需要为其添加一个高度，以便显示子菜单。

要进一步向左移动某些子菜单，您需要在其<ul>元素中添加一个类，然后添加css以定位它们并将它们移动到最左侧：

例如：如果您将类push_left添加到子菜单<ul>元素，则可以将其定位为：

#navigation>ul li .push_left {

    position: absolute;
    top: 42px;
    left: 0px; /* set this value to however far left you want the sub-menu */

}