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

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/

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