当外部div固定宽度并水平滚动时，如何使内部div宽度适合文本？

Question

HTML

<div class="outer">
    <ul>
        <li>
            <div>text</div>
        </li>
        <li>
            <div>longlonglonglonglonglonglonglonglonglonglonglonglong</div>
        </li>
    </ul>
</div>

的CSS

.outer {
    width: 300px;
    height: 200px;
    background-color: #ddd;
    overflow: scroll;
}

li {
    margin: 5px;
}

li>div {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    border: 1px solid #369;
    background-color: #fff;
}

JSFiddle

需要：

内部div宽度适合文本。而文字只是单行。而内部div不使用固定宽度。

像这样（这个演示LI的边距不起作用。） JSFiddle

Answer 1

把

float:left;
margin:5px;

in li＆gt; div style

DEMO

或DEMO 2

Answer 2

<强> HTML

<div class="outer">
    <ul>
        <li>
            <div>text</div>
        </li>
        <li>
            <div>longlonglonglonglonglonglonglonglonglonglonglonglong</div>
        </li>
    </ul>
</div>

<强> CSS

.outer {
    width: 300px;
    height: 200px;
    background-color: #ddd;
    overflow: scroll;
}

li {
    margin: 5px;
}

li>div {
    cursor: pointer;
    height: 30px;
    width:400px;
    line-height: 30px;
    border: 1px solid #369;
    background-color: #fff;

}

选中Fiddle。

如果您不想破解文本，则可以使用overflow-x:scroll属性

Answer 3

你现在习惯了

word-break: break-all;

.....

li>div {
    word-break: break-all; // add this line
    height:30px; // remove this line
}

在height

中

和删除 li>div

live demo

演示中的HTML

<div class="outer">
    <ul>
        <li>
            <div>text</div>
        </li>
        <li>
            <div>longlonglonglonglonglonglonglonglonglonglonglonglong</div>
        </li>
    </ul>
</div>

演示中的CSS

.outer {
    width: 300px;
    height: 200px;
    background-color: #ddd;
    overflow: scroll;
}

li {
    margin: 5px;
}

li>div {
    cursor: pointer;
    line-height: 30px;
    border: 1px solid #369;
    background-color: #fff;
     word-break: break-all;
}