下拉父母下面居中溢出：隐藏

我有一个导航栏，其中有一个链接文本字符串打开下拉菜单。这个链接的父母有overflow: hidden允许我截断字符串，因为它变得太长。不过，我希望将下拉菜单置于绝对的下方并居中，而不管父级的宽度如何。由于我使用的是overflow: hidden，因此下拉菜单会被截断。我想保持下拉菜单的定位以及overflow属性。下拉父母下面居中溢出：隐藏

有没有这方面的CSS修复？我知道我不能忽视父母的overflow属性，但我宁愿不使用position: fixed，并尽可能用JavaScript处理边距。

我做了一个简单的小提琴here

提前感谢！

来源

2015-12-02 Kevin Murphy

*“我要继续下拉的定位以及溢出性能。” *无CSS的解决方案，我所知道的。也许另一种截断字符串的方法？ –

我的回答有用吗？ ...其他方式是，即重新构建您的HTML，并将文本移出“内部”或将“overflow：hidden”设置为文本而不是其父文本。 – LGSon

不幸的是，在CSS中没有办法让一个子溢出：hidden元素在父边框外显示其内容，你必须改变层次结构。

如果这是不可能的，你可以在底部添加填充到.nav拉左的那就是你的下拉列表的大小，虽然这是一个垃圾的解决方案..

.nav_pull_left { 
    width:auto; 
    height:50px; 
    padding-bottom: 80px; 
    overflow:hidden; 
    float: none; 
    border: 1px solid black; 
    white-space: nowrap; 
}

您也可以使用JavaScript在下拉菜单显示时动态更新父容器的高度，但再次重新排序层次结构是最好和最干净的。

如果这是你想要去的方式，让我知道，我可以帮助:)

来源

2015-12-02 17:19:00 alengel

感谢您的回答！我认为如果我必须去JavaScript路线，那么我只是要定位它，但是我需要使用'position：fixed'并且称之为一天。我会及时向大家发布！ –

祝你好运吧！ – alengel

我建议以下内容，其中你改变你的CSS如下。

.nav_pull_right { 
    min-height:50px;  /* changed height to min-height */ 
    ... 
} 

.nav_pull_left { 
    min-height:50px;  /* changed height to min-height */ 
    ... 
} 

.my_dropdown { 
    position: relative; /* changed absolute to relative */ 
    margin: 0; 
    margin-left:-87px; 
    /* top: 2em; */  /* removed top */ 
    left: 50%; 
    width: 170px; 
    z-index: 99999; 
    border:2px solid #929292; 
}

随着这个你的容器溢出被保留下来，下拉菜单居中。

这是你可以使用的东西吗？

这里是一个fiddle demo

来源

2015-12-02 18:30:58 LGSon

下拉父母下面居中溢出：隐藏

回答

相关问题