html - 将 div 水平扩展到容器中

Question

我有一些我正在尝试修改的 css 和 html，以使 div 水平扩展为可缩放的 div，但是一旦达到宽度，我得到的只是“堆叠”。

小提琴

绝对定位在文档结构中非常重要，因此我需要保持大部分 css 不变。

有任何想法吗？

Answer 1

添加 white-space:nowrap;“mli”类

小提琴http://jsfiddle.net/cWpGS/51/

Answer 2

如果我理解正确，文本将完全延伸到容器中。您的问题是容器仅扩展到其父 div 的末尾，该父 div 分配的宽度非常小。更改容器 div 的宽度会使文本不换行：

jsFiddle

Answer 3

我认为这是有道理的

.q-d-list-container {
    display:block;
    position: absolute;
    top:5px;
    left:5px;
    right:5px;
    bottom:5px;
    background:#f1f1f1;
    border:1px solid #C4C4C4;
}

#q-d-list {
    display:block;
    background:white;
    border:1px solid #D4D4D4;
    width: 150px;
    position:absolute;
    left:5px;
    top:5px;
    bottom:5px;    
    overflow : auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.mli {
    padding:4px 0 4px 6px;
    margin:0;
    cursor:pointer;
}​

这是演示