我有一个菜单 ( jsfiddle ),如下所示,它是从 <ul>
构建的和 <li>
元素。
子菜单元素显示在父元素下方,容器是固定宽度的 <ul>
.我遇到的问题是,对于更右边的菜单元素,这个二级 <ul>
溢出父元素的宽度,像这样:
如何确保子菜单如第一张图片所示,但对于更靠右的菜单元素,只需不超过右边框,保持大小完好无损,而不是溢出?
最佳答案
添加到您的容器 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/
没有开箱即用的例子,但我相信这应该给你正确的方向..
关于html - 防止 block 元素溢出父元素的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16619529/