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

Question

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

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

我怎样才能确保 子菜单 显示在第一张图片中，但对于更靠右的菜单元素只是移动到不超过右边框，保持大小完好无损，而不是溢出？

Answer 1

添加到你的容器溢出-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 */

}