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

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 垂直对齐 2 个 div的示例

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

一个很好的工具提示，可以在http://craigsworks.com/projects/qtip/周围对齐

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

Answer 2

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

像这样

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 */

}