背景顏色不填充水平滾動下拉項目

Question

我正在爲一個項目的UI工作。我使用引導來創建UI。

我有一個下拉菜單，其中包含以前搜索的歷史記錄。由於這些搜索可能會很長，因此下拉菜單可能會變得足夠長，以至於頁面邊緣被切斷。爲了解決這個問題，我將最大寬度設置爲頁面寬度的百分比，然後讓用戶在出現溢出時水平滾動。這很好，但是有一個錯誤，其中背景顏色不能水平拉伸以填充一個長元素。

我已經搜索了這個問題，在我的情況下似乎有一個一致的問題。這個用戶界面很容易調整大小，範圍從150像素到一個完整的瀏覽器，因此頁面大小和下拉大小都不會是靜態的。

我提取了相關的頁面和代碼，並將其放入bootply。我也把我認爲相關的CSS放在CSS文件的頂部。有問題的下拉菜單是帶有時鐘圖標的下拉菜單。點擊它，下拉菜單是深色的。滾動，最長的項目將失去其背景顏色。我希望整個下拉元素都是相同的顏色。

請注意，此元素的最終寬度比我必須限制下拉寬度的寬度大得多，而且我不知道這個最終寬度。

這裏是bootply：https://www.bootply.com/2J0SOnElvM

感謝

Answer 1

CSS

.dropdown-menu { 
    max-height: 12.5em; /* 5 elements with 2.5em height */ 
    overflow-y: auto; 
    margin: 0; 
    padding: 0; 

    background-color: green; /* Your Background Color */ 

}