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

我有一個導航欄，其中有一個鏈接文本字符串打開下拉菜單。這個鏈接的父母有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

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

回答

相關問題