html - 当外部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 不使用固定宽度。

像这样（这个demo LI's margin not work.） JSFiddle

Answer 1

放

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
}

并删除 height你的li>div

现场演示

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