Question

我有一些css和html，我试图修改它，使得div可以水平扩展为可分割的div，但是一旦达到宽度，我得到的就是“堆叠”。

fiddle

绝对定位在文档结构中非常重要，所以我需要保留大部分css。

有什么想法吗？

Answer 1

在“mli”类

中添加white-space:nowrap;

小提琴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;
}

Here is the demo

将div水平扩展到容器中

3 个答案: