li元素甚至包含溢出：在父div上滚动和设置宽度

Question

我无法弄清楚为什么我div中的li元素仍在包装，即使我设置了溢出：滚动并给div一个宽度。

这是我的基本html：

<div id="myList">
    <ul>
        <li class="listItem"> Item 1 Text Text Text Text Text Text Text Text </li>
        <li class="listItem"> Item 2 </li>
        <li class="listItem"> Item 3 </li>
    </ul>
</div>

这是jsfiddle：http://jsfiddle.net/aHA33/

Answer 1

列出＆＃34; ul＆＃34; 一个宽度： http://jsfiddle.net/aHA33/3/

#myList ul {
    width: 400px;
}

#myList
{
    border-bottom: gray 1px solid;
    border-left: gray 1px solid; 
    padding-bottom: 0px; 
    margin: 0px; 
    padding-left: 0px; 
    padding-right: 0px; 
    height: 20em; 
    border-top: gray 1px solid; 
    border-right: gray 1px solid; 
    padding-top: 0px;
    width: 248px;
    overflow: scroll;
}

.listItem
{
    color: Navy;
    text-decoration: none! important;
    cursor: pointer;
    text-align: left;
    font-size: 10pt;
    font-family: Arial, San-serif, Tahoma;
    padding-left: 0.5em;
}