当外部 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

put

float:left;
margin:5px;

在 li>div 风格

演示

或演示 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;
}

检查这个小提琴。

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

Answer 3

嗨，

现在习惯了

word-break: break-all;

.....

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

并移除li>div中的height

现场演示

来自演示的 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;
}