Css ul的背景色未扩展为溢出：自动

我有一个

ul

包含在

div

中，给定了特定的宽度和高度，并设置为

overflow:auto

。当文本可见时，

背景色

会正确填充该区域：

…但是，当显示滚动区域时，

背景色不扩展到溢出区域：





以下是CSS：

.list_container {
    height: 145px;
    width: 150px;
    border: 2px solid black;

    /* for horizontal scrollbar: */
    overflow: auto;

    /* to prevent text from wrapping: */
    white-space: nowrap;
}
    #list {
        height: 100%;
        background-color: #EEEEEE;

        /* getting rid of list styling: */
        list-style-type: none;
    }
        /* getting rid of browser list indenting: */
        #list, #list li {
            margin: 0; padding: 0;
        }



…和HTML：

<div class = "list_container">
    <ul id = "list">
        <li>asdf asdf asdf asdf asdf asdf</li>
        <li>qwerty qwerty qwerty qwerty</li>
        <li>123 123 123 123 123 123 123 123</li>
        <li>abc abc abc abc abc abc abc abc</li>
    <ul>
</div>



asdf asdf asdf asdf asdf asdf asdf asdf
qwerty qwerty qwerty qwerty
123 123 123 123
美国广播公司

在
列表容器
上添加
背景色
，而不是在
ul
上

.list_container {
    height: 145px;
    width: 150px;
    border: 2px solid black;

    /* for horizontal scrollbar: */
    overflow: auto;

    /* to prevent text from wrapping: */
    white-space: nowrap;
    background-color: #EEEEEE;
}
#list {
    list-style-type: none;
    height: 100%;
}
#list, #list li {
   margin: 0; padding: 0;
}


问题是：
你的
ul
的宽度较短，因此
背景色
应用于容器div的较短部分。但是当你将
背景色
放在容器上时，它会填满整个容器的宽度。
哦，哈——没有尝试过，谢谢@Mohammad！如何在没有相同问题的情况下将
背景色添加到单个
li
？